使用 smox 拆分状态树,对应 react 组件树

822 阅读2分钟

最近发了 smox 2.0 ,我一直都说这是我今年最强的一次了::>_<:: 虽然只是一时的灵感,一天写完……

smox 不同于 redux 和 vuex,也不同于 rematch、dva ,它是重熔再生的,状态管理的顶级设计

虽然是革新,但是它仍然以精彩的机制实现了状态管理的 feature:不可变、单 store 等

写这篇文章,起因是来自一条疑问:

qq 20190108185117

这个问题,仿佛只要是用状态管理,就会被问到

各个状态管理,都给出了自己的拆分机制,如 rematch、dva 等的 model,vuex 的 modules

smox 同样,不仅给出了对应的机制,还比以上要精彩一个世纪~

在引出机制之前,我们先还原一下 react 组件

             / class Car1
class App 
             \ class Car2

如果是通常我们理解的 model 机制的话,可能就是,注册 car1 car2 两个 model,然后塞到全局 store 里

这和组件树是没关系的,你无法描述嵌套行为,也无法真正形成“一颗树”

那,smox 是怎么做呢?很简单,同样是 tree

const state = {
    car1: {
      // 这里是 car1 的局部状态
    },
    car2: {
      // 这里是 car2 的局部状态
    }
    //这里是 app 的全局状态
}

刺不刺激……我们将一个全局的 store 拆成一颗状态树,和组件树一一对应

那拆分呢?

模块化的目的就是为了代码拆分,也就是组织代码结构,其实既然能形成状态树,那—— 组件(Class)能拆,状态(Object)当然一样可以拆!

没错,不仅能拆,还能无限的拆,拆到天荒地老!粒度可以说非常完美啦!

那,组件内,拆完组件内,怎么用呢::>_<::

我们拆的是 store ,但是往组件注入的时候,是全局的 store 实例,组件内可以随意拿到这棵树上每一个分支,通过 path

@map({
  state: ['counter/count', 'sex'],
  actions: ['counter/up', 'counter/down', 'change'],
  effects: ['counter/upAsync']
})

以上,比如 counter/count,这个就是 counter 分支上的 count 属性 而 sex 就是全局的 sex 啦~

以上,就是 smox 的 path 机制,其实在此之前,我也写过 model 机制、写过 vuex 的 path 机制,说实话一直不满意的::>_<::

因为这些机制都是常规的封装套路,你的封装能力再强吧,极限也就是 vuex 的程度了

我一直认为,好的架构好的设计去规避大部分的问题,比写大量优质代码去解决大量问题,要好太多

最后,送上 smox 的 github 地址:

github.com/132yse/smox

欢迎试用与 star !我超贴心的!放心用!高颜值小受提供人工服务!