redux-toolkit

supply useful utils for redux

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
redux-toolkit
1.1.27 years ago7 years agoMinified + gzip package size for redux-toolkit in KB

Readme

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