Redux之redux-actions的使用

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：地址

    https://redux-actions.js.org/

3：安装

$ npm install --save redux-actions

or

$ yarn add redux-actions