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 })
AI 代码解读
AI 代码解读
可以看到,和 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
AI 代码解读
是的,没有看错,仍然是使用
@map
语法糖,其实单纯实现
dispatch('model/action')
是很简单的,难点就在于封装 map (对应他们的 connect)
@connect(({modalName,loading})=>({ modelName, loading:loading.effects['modelName/action], }))
AI 代码解读
上面这段代码是 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])
AI 代码解读
有了中间件,理论上我们就可以做很多事情了
最近迭代出 model 和 middleware 两个机制,也使得 smox 成为更好的状态管理方案
我坚信,smox 的机制、颜值,是目前最合理的方案之一
但是距离成为终极解决方案还需要继续进步!
总结
最后,smox 还会继续努力,欢迎试用与 star
源码地址:参见 github
附上文档: smox-document
原文作者:132
本文来源: 掘金 如需转载请联系原作者