Redux、rematch、dva的替代品：smox

halo ，你们好，我是 132 ，第一次发文章hhh

背景

咱们平时在开发 React 项目中，深深的感觉到了 Redux 的“长得丑，用得烦”，有的人去改造它，如 dva、rematch，对 Redux 包装语法糖，也有如 smox ，直接重熔再生，彻底摆脱 Redux 的局限的同时，还能拥抱“新特性”

rematch 做者文章里提到，工具质量 = 工具节省的时间 / 使用工具消耗的时间

咱们接下来就用这个公式，感觉下 smox 的工具质量

简化 API

值得一提，smox 的 API 是和 vuex 一致的，vuex 是一个我认为 API 最好用的状态管理，尽管 vue 被 react 用户所排斥，可是我仍是作不到一昧地否认，好就就是好嘛

因此 smox 汲取 vuex 的优势，API 变成了下面的样子：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './app.js'
import { Store, Provider } from 'smox'

const state = {
  count: 2
}

const actions = {
  asyncAdd({ commit }) {
    setTimeout(() => {
      commit('add')
    }, 1000)
  }
}

const mutations = {
  add(state) {
    state.count += 1
  },
  cut(state) {
    state.count -= 1
  }
}

const store = new Store({ state, mutations, actions })

ReactDOM.render(
  <Provider store = {store}> <App /> </Provider>,
  document.getElementById('root')
)
复制代码

感觉下，写过 vue 的是否是感受比较顺眼了呢

事实上，dva、rematch 的 API 也是几乎相同的，只不过 smox 的 mutations 对应它们的 reducers，actions 对应 effects

那几乎相同的 API，到底有什么不一样呢？

简单的和 rematch 对比

咱们看一下 rematch 的吧：

add(state, payload) {
      return state + payload
    }
复制代码

它将 state 做为参数传进来，可是 return 的时候改变了参数，这就不是一个纯函数，咱们须要手动去优化性能

而 smox 却 使用了 Proxy 的方式，进行对象劫持，不须要 return ，可以精准的劫持变化

add(state, payload) {
      state.count += payload
    }
复制代码

从这个机制上看，很明显 smox 的方向是对的

除此以外，rematch 还存在好几个问题，好比 没法摆脱 action type 的局限，没有对 connect 进行封装等等

至于 dva ，其实我没仔细研究过它的源码，可是它不能算是一个工具，而是一个框架，我我的不提倡这种的啦~

以上，经过简单的 smox 和 rematch 的对比，直白的感觉 smox

除了使用 Proxy 这个新 API 之外，smox 还使用了 New Context API ，这个在 smox 最初就使用了，当时 react16.3 尚未发布√

再好比体积小，仍是 rematch ，若是使用它，仍然须要下载 redux 、react-redux 等库，体积是比较臃肿的，可是 smox 彻底抛弃 redux，gzipped 1KB

仍需改进

smox 接下来还会进行大版本的改进，好比增长中间件机制

总结

咱们在回顾一下公式：工具质量 = 工具节省的时间 / 使用工具消耗的时间

判断下……

最后附上 smox 的 GitHub 地址： https://github.com/132yse/smox

求 star、求 bug、求 issue、求 pr

而后文档地址： https://smox.js.org/

哈哈哈，上班时间摸鱼，溜了溜了！