狀態管理神器 moox 釋出 1.0 beta版本

hellosean發表於2018-02-01

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)

複製程式碼

相關文章