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

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

日期：2018-07-17点击：577收藏

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 的机制、颜值，是目前最合理的方案之一

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