非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

Redux Toolkit 快速入门

你将学到什么

• 如何设置和使用 Redux Toolkit 与 React-Redux

预备知识

• 熟悉 ES6 语法和特性
• 了解 React 术语: JSX, 状态, 函数组件, Props, 以及 Hooks
• 理解 Redux 术语和概念

简介

欢迎阅读 Redux Toolkit 快速入门教程！本教程将简要介绍 Redux Toolkit，并教你如何正确地开始使用它。

如何阅读本教程

本文将重点介绍如何使用 Redux Toolkit 设置 Redux 应用程序以及你将使用的主要 API。有关 Redux 是什么、它是如何工作的以及如何使用 Redux Toolkit 的完整示例，请参阅 “教程索引”页面 中链接的教程。

本教程假设你将 Redux Toolkit 与 React 一起使用，但你也可以将其与其他 UI 层一起使用。示例基于 典型的 Create-React-App 文件夹结构，其中所有应用程序代码都在 src 文件夹中，但这些模式可以适应你使用的任何项目或文件夹设置。

Create-React-App 的 Redux+JS 模板 已经预先配置了相同的项目设置。

使用摘要

安装 Redux Toolkit 和 React-Redux

将 Redux Toolkit 和 React-Redux 包添加到你的项目中：

npm install @reduxjs/toolkit react-redux

创建 Redux Store

创建一个名为 src/app/store.js 的文件。从 Redux Toolkit 导入 configureStore API。我们将从创建一个空的 Redux store 并导出它开始：

app/store.js

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {}
})

这将创建一个 Redux store，并且会自动配置 Redux DevTools 扩展，以便你在开发过程中可以检查 store。

向 React 提供 Redux Store

一旦 store 创建完成，我们可以通过在 src/index.js 中用 React-Redux 的 <Provider> 包裹我们的应用程序，使其可用于 React 组件。导入我们刚刚创建的 Redux store，用 <Provider> 包裹你的 <App>，并将 store 作为 prop 传递：

index.js

import React from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'

const root = createRoot(document.getElementById('root')!)

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
)

创建 Redux State Slice

添加一个名为 src/features/counter/counterSlice.js 的新文件。在该文件中，从 Redux Toolkit 导入 createSlice API。

创建一个 slice 需要一个字符串名称来标识该 slice、一个初始状态值以及一个或多个 reducer 函数来定义状态如何更新。一旦 slice 创建完成，我们可以导出生成的 Redux action creators 和整个 slice 的 reducer 函数。

Redux 要求 我们以不可变的方式编写所有状态更新，即通过复制数据并更新副本。然而，Redux Toolkit 的 createSlice 和 createReducer API 内部使用了 Immer，允许我们 编写“直接修改”状态的更新逻辑，这些逻辑会被转换为正确的不可变更新。

features/counter/counterSlice.js

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

将 Slice Reducers 添加到 Store

接下来，我们需要从计数器切片中导入 reducer 函数并将其添加到 store 中。通过在 reducer 参数中定义一个字段，我们告知 store 使用此切片 reducer 函数来处理该状态的所有更新。

app/store.js

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

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

在 React 组件中使用 Redux 状态和操作

现在我们可以使用 React-Redux 钩子让 React 组件与 Redux store 交互。通过 useSelector 读取 store 数据，使用 useDispatch 分发操作。创建包含 <Counter> 组件的 src/features/counter/Counter.js 文件，然后将其导入 App.js 并在 <App> 中渲染。

features/counter/Counter.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'

export function Counter() {
  const count = useSelector(state => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

现在，每次点击"Increment"（增加）和"Decrement"（减少）按钮时：

• 相应的 Redux 操作将被分发到 store

• 计数器切片 reducer 将识别这些操作并更新其状态

• <Counter> 组件将从 store 获取新的状态值，并使用新数据重新渲染自身

学习要点

以上简要概述了如何在 React 中设置和使用 Redux Toolkit。现在回顾关键细节：

总结

• 使用 configureStore 创建 Redux store
  • configureStore 接受 reducer 函数作为命名参数
  • configureStore 自动配置具有良好默认设置的 store
• 向 React 应用组件提供 Redux store
  • 用 React-Redux 的 <Provider> 组件包裹 <App />
  • 传递 Redux store 作为 <Provider store={store}>
• 使用 createSlice 创建 Redux "切片" reducer
  • 使用字符串名称、初始状态和命名的 reducer 函数调用 createSlice
  • Reducer 函数可使用 Immer "直接修改"状态
  • 导出生成的切片 reducer 和 action 创建器
• 在 React 组件中使用 React-Redux 的 useSelector/useDispatch 钩子
  • 通过 useSelector 钩子从 store 读取数据
  • 使用 useDispatch 钩子获取 dispatch 函数，按需分发操作

完整计数器应用示例

以下是完整的计数器应用示例（CodeSandbox 实时演示）：

下一步是什么？

我们建议学习 完整的 "Redux 精要" 教程，其中涵盖了 Redux Toolkit 的所有关键部分、解决的问题以及如何用于构建实际应用。

您也可以阅读 “Redux 基础”教程，它将帮助您全面理解 Redux 的工作原理、Redux Toolkit 的作用以及如何正确使用。