手把手教你 Redux Toolkit

Redux 是一个非常流行的 JavaScript 状态管理库，但它的配置和使用却相对繁琐。Redux Toolkit 是一个官方提供的旨在简化 Redux 的工具包，它在使用上更加简单易懂，为开发者提供了更多的便利。

本文将带你了解 Redux Toolkit 的基础知识，从创建 Redux store 到使用 createAction 和 createSlice 简化 Redux 的操作。

安装 Redux Toolkit

要使用 Redux Toolkit，我们需要安装最新的版本。

npm install @reduxjs/toolkit

或者使用 yarn：

yarn add @reduxjs/toolkit

创建 Redux store

创建 Redux store 是一个非常重要的步骤。我们可以使用 createSlice 和 createAction 创建我们的 reducer，然后使用 configureStore 创建 store。

import { createSlice, configureStore } from '@reduxjs/toolkit'

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

export const { increment, decrement } = counterSlice.actions

const counterReducer = counterSlice.reducer

export default configureStore({
  reducer: {
    counter: counterReducer
  }
})

上面的代码将创建一个名为 counter 的 reducer，包含 increment 和 decrement 两个 action。

我们可以使用 configureStore 创建 store，将 counterReducer 作为 reducer 传入，如下所示：

import { increment, decrement } from './counterSlice'

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
})

store.dispatch(increment())
store.dispatch(decrement())

如果我们没有错误，我们应该在控制台中看到相应的计数值。但是，这样做虽然能正常使用，但是不利于项目结构的管理。对于一个包含数个 reducer 的大型项目，我们需要一种更加组织化的方式来存储 reducer。

使用 createSlice 简化 reducer

Redux Toolkit 提供了一个 createSlice 函数来简化 reducer 的创建。我们可以基于 createSlice 创建一个 reducer，然后将 reducer 传递给 configureStore。

import { createSlice, configureStore } from '@reduxjs/toolkit'

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

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

export const { increment, decrement } = counterSlice.actions

export default store

如上所示，我们可以直接传递 counterSlice.reducer 作为 reducer，而不是自己手动编写 reducer。

使用 createAction

createAction 是 Redux Toolkit 提供的一种简化 action 创建的方式。它简化了我们创建 action 和 action creator 的过程。

// 不使用 createAction 的做法
const incrementCounter = (amount) => {
  return {
    type: 'counter/increment',
    payload: amount
  }
}

// 使用 createAction 的做法
const incrementCounter = createAction('counter/increment')

使用 createAction 后，我们可以仅仅使用一个字符串来创建 action。Redux Toolkit 会为我们自动生成一个 action creator 和一个 action。

const incrementCounter = createAction('counter/increment')

// 当我们调用 incrementCounter(2) 时，它将返回 { type: 'counter/increment', payload: 2 }

总结

Redux Toolkit 是官方提供的一个用于简化 Redux 操作的工具包，可以大大提高开发效率。在本文中，我们介绍了如何使用 Redux Toolkit 创建 Redux store、如何使用 createSlice 函数简化 reducer 的创建、以及如何使用 createAction 简化 action 的创建。

当你开始使用 Redux Toolkit 时，你将发现 Redux 开发不再那么复杂，而且更容易维护和组织。如果你需要创建大型项目或需要快速创建 Redux 应用程序，Redux Toolkit 将是一个非常有用的工具。

示例代码：https://codesandbox.io/s/redux-toolkit-demo-lg67k

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659606ddeb4cecbf2d9ec9bd