(一)掌握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写法要使用switch或if 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);

https://www.cnblogs.com/YooHoeh/p/9381417.html

你可能感兴趣的:((一)掌握redux-action使用方法)