14redux 之 redux-actions

Posted yezixuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了14redux 之 redux-actions相关的知识,希望对你有一定的参考价值。

redux-actions有两大法宝createActionhandleActions.

createAction

http://www.jianshu.com/p/6ba5cd795077

原来创建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``reducer操作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);

http://blog.csdn.net/sinat_17775997/article/details/70176723

以上是关于14redux 之 redux-actions的主要内容,如果未能解决你的问题,请参考以下文章

typescript + redux:在父组件中排除 redux props

P14:Redux进阶-Axios异步获取数据并和Redux结合

Redux源码分析之compose

Redux 进阶之 react-redux 和 redux-thunk 的应用

Flutter之Redux原理解析

Redux入门之实现一个迷你版的Redux