1.0.1 • Published 6 years ago
redux-ra v1.0.1
redux-ra
- 将reducer和actions定义在同一个位置,方便修改
- 抛弃繁琐的actionTypes常量定义
- 简化目录结构,合并引入文件的入口
用法
定义
bindReducerActions(initialState, actionDefines, defaultCase)
以 todomvc的reducer定义为例
// ra/todos.js
import {bindReducerActions} from 'redux-ra';
var idSerial = 0;
export default bindReducerActions([], {
// action的名称
addTodo: {
// action传递的参数处理
payload: text => ({text}),
// 当前action对应的reducer
reducer: (state, payload) => ([
...state,
{
id: ++idSerial,
completed: false,
text: payload.text
}
])
},
deleteTodo: {
payload: id => ({id}),
reducer: (state, payload) => state.filter(todo => todo.id !== payload.id)
}
})
导出
// ra/index.js
import {exportReducers, exportActions} from 'redux-ra';
import {combineReducers} from 'redux';
import todos from './todos';
export const reducer = combineReducers(exportReducers({
todos
// ...其它reducerActions
}));
export const actions = exportActions({
todos
// ...其它reducerActions
})
导出的reducers是将多个reducer按键值对放入对象内,可以直接用于combineReducers
导出的actions是将多个actions按键值对放入对象内
在container内使用**
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import Main from "../components/Main";
import {actions} from '../ra';
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(actions.todos, dispatch)
})
export default connect(null, mapDispatchToProps)(Main);
推荐目录结构
src
-- index.js
-- style
-- components
-- containers
-- constants
-- ra
-- index.js
-- todos.js