1:作用:
当我们的在开发大型应用的时候,对于大量的action,我们的reducer需要些大量的swich来对action.type进行判断。
redux-actions可以简化这一烦琐的过程,它可以是actionCreator,也可以用来生成reducer,
其作用都是用来简化action、reducer。
主要函数有createAction、createActions、handleAction、handleActions、combineActions。
createAction
原来创建action:
const action = { type: START };
使用redux-actions创建action:
import { createAction } from 'redux-actions';
const action = createAction(START);
注:
export const increment = createAction('INCREMENT')
export const decrement = createAction('DECREMENT')
等于:
increment() // { type: 'INCREMENT' }
decrement() // { type: 'DECREMENT' }
handleActions
作用:redux框架下的reducer操作state,主要使用switch或if else来匹配
原来reducer操作state写法要使用switch或if else来匹配:
原来的reducer
function timer(state = defaultState, action) {
switch (action.type) {
case START:
return { ...state, runStatus: true };
case STOP:
return { ...state, runStatus: false };
case RESET:
return { ...state, seconds: 0 };
case RUN_TIMER:
return { ...state, seconds: state.seconds + 1 };
default:
return state;
}
}
使用 redux-actions 操作 state
const timer = handleActions({
START: (state, action) => ({ ...state, runStatus: true }),
STOP: (state, action) => ({ ...state, runStatus: false }),
RESET: (state, action) => ({ ...state, seconds: 0 }),
RUN_TIMER: (state, action) => ({ ...state, seconds: state.seconds + 1 }),
}, defaultState);
2:地址
3:安装
$ npm install --save redux-actions
or
$ yarn add redux-actions