Redux、rematch、dva的替代品：smox

132發表於2018-06-26
ReduxREM

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/

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

相關文章