redux-toolkit

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下的变量冲突问题
• 可以解构action 和 state
• 使用箭头函数
• 当swtich case 过多时，object 的速度会比 switch 更快
• 不再会被 break 和 default 恶心

下面是一个简单的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数组，会将参数按顺序放置在action的payload属性中。

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