提供实用的工具函数,改善使用redux的开发体验,提供代码可读性。
createReducer
a functional way to write reducercreateAction
a simple way to write actiondebugMiddleware
a useful debug middlewaremnpm install redux-toolkit
import { createAction, createReducer, debugMiddleware } from 'redux-toolkit'
避免使用switch碰到的问题:
case
下的变量冲突问题action
和 state
break
和 default
恶心下面是一个简单的reducer例子
import { ADD_TODO, DELETE_TODO, EDIT_TODO, COMPLETE_TODO, COMPLETE_ALL, CLEAR_COMPLETED } from '../constants/ActionTypes';
const initialState = [{
text: 'Use Redux',
completed: false,
id: 0
}];
export default createReducer({
[ADD_TODO]: (state, { text }) => [{
id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1,
completed: false,
text
}, ...state],
[DELETE_TODO]: (state, { id }) => state.filter(todo =>
todo.id !== action.id
),
[EDIT_TODO]: (state, { id, text }) => state.map(todo =>
todo.id === id ?
Object.assign({}, todo, { text }) :
todo
),
[COMPLETE_ALL]: state => {
const areAllMarked = state.every(todo => todo.completed);
return state.map(todo => Object.assign({}, todo, {
completed: !areAllMarked
}));
},
[CLEAR_COMPLETED]: state => state.filter(todo => todo.completed === false)
}, initialState)
提供更简单的方法去创建actionCreator。下面是通过actionCreator和普通方法进行对比。
创建没有payload的action
createAction('showAll');
function() {
return {
type: 'showAll'
}
}
只有一个携带值
当只有一个需要传递给reducer
的值时,接受一个key。
createAction('add', 'value');
function(value) {
return {
type: 'add',
payload: {
value: value
}
};
}
传递多个值
接受一个keys数组,会将参数按顺序放置在action
的payload
属性中。
createAction('add', ['num1', 'num2']);
function (num1, num2) {
return {
type: 'add',
payload: {
num1: num1,
num2: num2
}
};
}
根据函数创建action
接受一个将参数处理为payload
的函数
createAction('add', (num1, num2) => {
number1: num1,
number2: num2,
other: num1 * num2
})
function (num1, num2) {
var getAction = (num1, num2) => {
number1: num1,
number2: num2,
other: num1 * num2
};
return {
type: 'add',
payload: getAction(num1, num2)
};
}
提供一个debug的middleware