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/

哈哈哈，上班時間摸魚，溜了溜了！