給 smox 加上翅膀，不斷進步的 react 狀態管理

132發表於2018-07-03
原文網址 : https://juejin.im/post/5b3adc10f265da63127f91e6
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

相關文章