redux-actions

其作用都是用来简化action、reducer。

1.安装

npm install --save redux-actions
// 或
yarn add redux-actions

2.使用

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

原来的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
);

.