rc-redux-modelredux 样板代码辅助工具
rc-redux-model 提供了一种较为舒适的数据状态管理书写方式，让你简洁优雅地去开发；内部自动生成 action, 只需记住一个 action，可以修改任意的 state 值，方便简洁，释放你的 ⌨️ CV 键～
rc-redux-model 参考了 dva 的数据流方案，在一个 model 文件中写所有的 action、reducer、state，解读了 redux-thunk 的源码，内部实现了一个中间价，同时提供默认行为 action，调用此 action 可以直接修改任意值的 state，例如 :
只需要定义一个 model
export default {
namespace: 'reduxModel',
state: {
testA: '',
testB: [],
},
}
那么 rc-redux-model 会自动帮你注册 action 及 reducers，等价于 :
export default {
namespace: 'reduxModel',
state: {
testA: '',
testB: [],
},
action: {
settestA: ({ commit, currentAction }) => {
commit({
type: 'SET_REDUXMODEL_TESTA',
payload: currentAction.payload,
})
},
settestB: ({ commit, currentAction }) => {
commit({
type: 'SET_REDUXMODEL_TESTB',
payload: currentAction.payload,
})
},
// 推荐使用此action进行修改reducers值
setStore: ({ dispatch, currentAction }) => {
dispatch({
type: `reduxModel/change${currentAction.payload.key}`,
payload: currentAction.payload.values,
})
},
},
reducers: {
['SET_REDUXMODEL_TESTA'](state, payload) {
return {
...state,
...payload,
}
},
['SET_REDUXMODEL_TESTB'](state, payload) {
return {
...state,
...payload,
}
},
},
}
那么你只需要在组件中，调用的默认 Action 即可
class MyComponent extends React.Component {
componentDidMount() {
this.props.dispatch({
type: 'reduxModel/setStore',
payload: {
key: 'testA',
values: '666',
},
})
}
}
✨ 特性
- 轻巧简洁，写数据管理就跟写
dva一样舒服 - 异步请求由用户自行处理，内部支持 call 方法，可调用提供的方法进行转发，该方法返回的是一个 Promise
- 参考
redux-thunk，内部实现独立的中间件，所有的 action 都是异步 action - 提供默认行为 action，调用此 action ，可以修改任意的 state 值，解决你重复性写 action 、reducers 问题
- 内置
seamless-immutable，只需开启配置，让你的数据不可变 - 默认检测不规范的赋值与类型错误，让你的数据更加健壮
评论