轻松掌握Redux-Action使用方法

时间:2023-03-09 05:34:24
轻松掌握Redux-Action使用方法

轻松掌握Redux-Action使用方法


Redux-Action主要有两个方法,createAction和createAction,只要掌握了这两个方法就会了redux-action的使用。

createAction


原来创建action:

const startAction = () => ({ type: START });

使用redux-actions创建action:

import { createAction } from 'redux-actions';
const startAction = createAction(START);

handleActions


原来reducer操作state写法要使用switchif else来匹配:

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);