给 smox 加上翅膀，不断进步的 react 状态管理
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
原文作者：132
本文来源： 掘金 如需转载请联系原作者