redux-toolkit详解

简述

　　redux-toolkit是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集，本质是对redux的封装，方便我们写reducer、action creator和继承类似thunk的中间件。

安装

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

configureStore

　　在原生的redux里我们用createStore来创建一个store，并传入root reducer函数

　　在toolkit里我们用configureStore函数，在对象里我们能进行配置，他还包含一些中间件

// 之前:
const store = createStore(counter)

// 之后:
const store = configureStore({
  reducer: counter
})

createAction

　　createAction接收一个 action type 字符串作为参数，并返回一个使用该 type 字符串的 action creator 函数，原来我们则需定义aciton的type，然后使用一个函数来创建一个action对象

// 原本的实现: 纯手工编写 action type 和 action creator
const INCREMENT = 'INCREMENT'

function incrementOriginal() {
  return { type: INCREMENT }
}

console.log(incrementOriginal())
// {type: "INCREMENT"}

// 或者，使用 `createAction` 来生成 action creator:
const incrementNew = createAction('INCREMENT')

console.log(incrementNew())
// {type: "INCREMENT"}

　　然后在reducer中就能引用action的type字符串了

const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

function counter(state = 0, action) {
  switch (action.type) {
    case increment.type:
      return state + 1
    case decrement.type:
      return state - 1
    default:
      return state
  }
}

const store = configureStore({
  reducer: counter
})

document.getElementById('increment').addEventListener('click', () => {
  store.dispatch(increment())
})

createReducer

　　在reducer里用switch或者if来分情况写state的更新逻辑，非常的繁琐

　　createReducer使用"查找表"对象的方式编写 reducer，其中对象的每一个 key 都是一个 Redux action type 字符串，value 是 reducer 函数，我们可以用es6的计算属性从type字符串变量来创建key

const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

const counter = createReducer(0, {
  [increment.type]: state => state + 1,
  [decrement.type]: state => state - 1
})

　　然后因为计算属性语法将在其中任何变量上调用toString()，我们可以直接使用action creator函数

const counter = createReducer(0, {
  [increment]: state => state + 1,
  [decrement]: state => state - 1
})

createSlice

　　我们回顾上面的例子，我们会发现我们为什么要单独写action creator呢，真正有用的是reducer

const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

const counter = createReducer(0, {
  [increment]: state => state + 1,
  [decrement]: state => state - 1
})

const store = configureStore({
  reducer: counter
})

document.getElementById('increment').addEventListener('click', () => {
  store.dispatch(increment())
})

　　我们可以用createSlice函数，他允许我们提供一个带有reducer函数的对象，并且它根据我们列出的reducer的名称自动生成action type字符串和action creator函数

　　createSlice返回一个‘切片’对象，该对象包含被生成的reducer函数，他的actions属性是一个对象，包含所有的action creator函数

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1
  }
})

const store = configureStore({
  reducer: counterSlice.reducer
})

document.getElementById('increment').addEventListener('click', () => {
  store.dispatch(counterSlice.actions.increment())
})

　　我们可以用解构赋值的语法来获取reducer和actions

const { actions, reducer } = counterSlice
const { increment, decrement } = actions

references

https://cn.redux.js.org/redux-toolkit/overview/

https://redux-toolkit.js.org/introduction/getting-started

https://redux-toolkit-cn.netlify.app/introduction/quick-start

https://redux-toolkit-cn.netlify.app/tutorials/basic-tutorial