redux-toolkit

    1.1.2 • Public • Published

    redux-toolkit

    introduction

    提供实用的工具函数,改善使用redux的开发体验,提供代码可读性。

    • createReducer a functional way to write reducer
    • createAction a simple way to write action
    • debugMiddleware a useful debug middleware

    installation

    mnpm install redux-toolkit

    Usage

    import { createAction, createReducer, debugMiddleware } from 'redux-toolkit'

    createReducer

    避免使用switch碰到的问题:

    • 不用担心各个case下的变量冲突问题
    • 可以解构actionstate
    • 使用箭头函数
    • 当swtich case 过多时,object 的速度会比 switch 更快
    • 不再会被 breakdefault 恶心

    下面是一个简单的reducer例子

    import { ADD_TODO, DELETE_TODO, EDIT_TODO, COMPLETE_TODO, COMPLETE_ALL, CLEAR_COMPLETED } from '../constants/ActionTypes';
    
    const initialState = [{
      text: 'Use Redux',
      completed: false,
      id: 0
    }];
    
    export default createReducer({
      [ADD_TODO]: (state, { text }) => [{
        id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1,
        completed: false,
        text
      }, ...state],
    
      [DELETE_TODO]: (state, { id }) => state.filter(todo =>
        todo.id !== action.id
      ),
    
      [EDIT_TODO]: (state, { id, text }) => state.map(todo =>
        todo.id === id ?
          Object.assign({}, todo, { text }) :
          todo
      ),
    
      [COMPLETE_ALL]: state => {
        const areAllMarked = state.every(todo => todo.completed);
        return state.map(todo => Object.assign({}, todo, {
          completed: !areAllMarked
        }));
      },
    
      [CLEAR_COMPLETED]: state => state.filter(todo => todo.completed === false)
    }, initialState)
    

    createAction

    提供更简单的方法去创建actionCreator。下面是通过actionCreator和普通方法进行对比。

    创建没有payload的action

    createAction('showAll');
    
    function() {
      return {
        type: 'showAll'
      }
    }
    

    只有一个携带值

    当只有一个需要传递给reducer的值时,接受一个key。

    createAction('add', 'value');
    
    function(value) {
      return {
        type: 'add',
        payload: {
          value: value
        }
      };
    }
    

    传递多个值

    接受一个keys数组,会将参数按顺序放置在actionpayload属性中。

    createAction('add', ['num1', 'num2']);
    
    function (num1, num2) {
      return {
        type: 'add',
        payload: {
          num1: num1,
          num2: num2  
        }
      };
    }
    

    根据函数创建action

    接受一个将参数处理为payload的函数

    createAction('add', (num1, num2) => {
      number1: num1,
      number2: num2,
      other: num1 * num2
    })
    
    function (num1, num2) {
      var getAction = (num1, num2) => {
        number1: num1,
        number2: num2,
        other: num1 * num2
      };
      return {
        type: 'add',
        payload: getAction(num1, num2)
      };
    }
    

    debugMiddleware

    提供一个debug的middleware

    features

    • if dispatched action don't match FSA rules, will throw Error
    • print the info of actions
    • print the old state after action dispatched

    Install

    npm i redux-toolkit

    DownloadsWeekly Downloads

    5,802

    Version

    1.1.2

    License

    none

    Last publish

    Collaborators

    • yeatz