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 代码解读
可以看到，和 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 AppAI 代码解读
是的，没有看错，仍然是使用
@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
本文来源： 掘金 如需转载请联系原作者
