zoukankan      html  css  js  c++  java
  • 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
    );

    .

  • 相关阅读:
    一些常用的代码规范
    策略模式学习,使用go实现策略模式
    数据库作业3:第二章课后题
    数据库作业4:SQL练习1
    对数据库相关的概念自己的理解
    SQL server的初步使用
    对于高德地图SDK的开发使用
    滑稽(好像会动)!
    羊车门作业
    对Python课的看法
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9671954.html
Copyright © 2011-2022 走看看