1.0.1 • Published 6 years ago

redux-ra v1.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
6 years ago

redux-ra

  1. 将reducer和actions定义在同一个位置,方便修改
  2. 抛弃繁琐的actionTypes常量定义
  3. 简化目录结构,合并引入文件的入口

用法

定义

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
	
1.0.1

6 years ago

1.0.0

6 years ago