狀態管理神器 moox 發佈 1.0 beta版本

moox

moox 是基於 redux 開發的高性能狀態管理機。

github: github.com/suxiaoxin/m…

我是開源項目 YApi 做者，moox 是本身在使用 redux 過程當中生成的靈感，麻煩各位 star 下github。

安裝

npm install moox

用法

moox 封裝了 redux 的 action, reducer 到一個文件。

首先調用 moox(models) 初始化，models 對象結構是

{
    modelName: model
}
複製代碼

model 結構以下面示例代碼，model.state 是初始化的 state, 帶 Action 字符串後綴的函數是一個 action，比較特殊的是，action 函數不須要寫繁瑣的 type, 全部 actionType 都會自動生成。

model.reducers 存儲純函數 reducer，跟 redux-reducer 不同的是 moox-reducer 不須要返回新的 state,直接修改函數參數傳入的 state,便可自動化生成新的 state。

詳細用法請參考 demo 下的 index.js

Example

model 層代碼：

const model = {
  state: {
    list: [1],
    status: 0
  },
  requestStatusAction: () => { },
  addUserAction: () => (
    {
      payload: new Promise((resolve) => {
        setTimeout(function () {
          resolve(100)
        }, 1000)
      })
    }),  
  reducers: {
    addUserAction: function (state, action) {
      state.list.push(Math.round(Math.random() * 1000))
      state.status = 0
    },
    requestStatusAction: function (state, action) {
      state.status = 1
    }
  }
}

複製代碼

組件層跟 react-redux 用法同樣：

const App = (props)=>{  
  const handleClick = () =>{
    if(props.user.status === 1) return;
    props.requestStatusAction()    
    props.addUserAction()  
  }

  return <div> <div><button onClick={handleClick}>Add Random Number</button> {props.user.status === 1? 'loading...' : ''} </div> {props.user.list.map((item, index)=>{ return <div key={index}>{item}</div> })} </div>
}


export default connect((state)=>({
  user: state.user
}), {
  addUserAction: Model.user.addUserAction,
  requestStatusAction: Model.user.requestStatusAction
})(App)

複製代碼