您现在的位置是:首页 > 文章详情

给 smox 加上翅膀,不断进步的 react 状态管理

日期:2018-07-17点击:558

halo 大家好,我是 132

这段时间,一直沉迷 smox 的迭代,然后又发布新版本了

上一篇文章(查看这里),已经简单阐述了 smox ,文章中也有人提到中间件机制,今天这篇文章可能稍稍复杂些,主要是 smox 两个机制

model 机制

smox 提供 model 机制用于业务逻辑的拆分,应对大型项目

类似的机制同类工具也存在,如 vuex 的 modules、dva 的 model 机制

smox 的 model 机制大概是这样的:



const sex = { state: { sex: 'boy' }, mutations: { change(state, payload) { state.sex = payload } }, actions: { asyncChange({ commit }, payload) { setTimeout(() => { commit('change', payload) }, 1000) } } } const store = new Store({ sex }) 


可以看到,和 dva 还是神似的,只不过不需要写 namespace,因为 smox 内部做了处理

此时,我们就可以通过store.commit('sex/change')来直接调用 sex model 下面的 change 方法了

组件内怎样使用呢?


import { map } from 'smox' @map({ state: ['sex/sex'], mutations: ['sex/change'], actions: ['sex/asyncChange'] }) class App extends React.Component { render() { return ( <div> <h1>现在是{this.props.sex}</h1> <button onClick={this.props.change('girl')}>变性</button> <button onClick={this.props.change('girl')}>异步变性</button> </div> ) } } export default App 

是的,没有看错,仍然是使用 @map 语法糖,其实单纯实现 dispatch('model/action') 是很简单的,难点就在于封装 map (对应他们的 connect)



@connect(({modalName,loading})=>({ modelName, loading:loading.effects['modelName/action], }))

上面这段代码是 dva 的 connect ,不难发现,如果用了 model 机制,这个语法糖就会变得惨不忍睹

而 smox 在这方面还是很重视的,毕竟我是个 API 程序员

好啦,model 机制差不多就这样了,我们来看看中间件机制吧!

中间件机制

所谓的中间件机制,洋葱模型,其实就是 有个 next 函数可以 return 另一个函数

smox 的中间件也是这样,而且和 redux 神似,定制一个 smox 中间件也是同样的:


export const logger = ({state}) => (next) => (mutation,payload) =>{ console.group('before',state) next(mutation,payload) console.log('after', state) console.groupEnd() } const store = new Store({ sex },[logger]) 

有了中间件,理论上我们就可以做很多事情了

最近迭代出 model 和 middleware 两个机制,也使得 smox 成为更好的状态管理方案

我坚信,smox 的机制、颜值,是目前最合理的方案之一

但是距离成为终极解决方案还需要继续进步!

总结

最后,smox 还会继续努力,欢迎试用与 star

源码地址:参见 github

附上文档: smox-document




原文发布时间为:2018年07月03日
原文作者:132
本文来源:  掘金  如需转载请联系原作者



原文链接:https://yq.aliyun.com/articles/613906
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章