状态管理神器 moox 发布 1.0 beta版本

最新推荐文章于 2024-08-07 09:56:19 发布

weixin_34297704

最新推荐文章于 2024-08-07 09:56:19 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a7310db5188257a5c603959

moox是一款基于Redux开发的状态管理库，简化了action和reducer的定义方式，支持异步操作并自动更新状态。

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)

复制代码