React Redux 快速入门

您将学到什么

如何使用 React Redux 设置和使用 Redux Toolkit

先决条件

简介

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

如何阅读本教程

本页将重点介绍如何使用 Redux Toolkit 设置 Redux 应用程序以及您将使用的主要 API。有关 Redux 的解释、工作原理以及如何使用 Redux Toolkit 的完整示例，请参阅 Redux 核心文档教程。

在本教程中，我们假设您将 Redux Toolkit 和 React Redux 结合使用，因为这是标准的 Redux 使用模式。这些示例基于典型的 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。

将 Redux Store 提供给 React

创建 store 后，我们可以通过在 src/index.js 中将 React Redux 的 <Provider> 放在应用程序周围，使其可供我们的 React 组件使用。导入我们刚刚创建的 Redux store，将 <Provider> 放在 <App> 周围，并将 store 作为道具传递

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

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))

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

创建 Redux 状态切片

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

创建切片需要一个字符串名称来标识切片，一个初始状态值，以及一个或多个 reducer 函数来定义如何更新状态。创建切片后，我们可以导出生成的 Redux action creators 和整个切片的 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.
      // Also, no return statement is required from these functions.
      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

将切片 reducer 添加到 store

接下来，我们需要从 counter 切片导入 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 派发操作。创建一个名为 src/features/counter/Counter.js 的文件，并在其中创建一个 <Counter> 组件，然后将该组件导入到 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>
  )
}

现在，每当你点击“增加”和“减少”按钮时

相应的 Redux 操作将被派发到 store 中
计数器切片 reducer 将看到这些操作并更新其状态
<Counter> 组件将从 store 中看到新的状态值，并使用新数据重新渲染自身

你学到了什么

这是关于如何使用 Redux Toolkit 与 React 进行设置和使用的简要概述。回顾一下细节

总结

使用 configureStore 创建 Redux store
- configureStore 接受一个名为 reducer 的函数作为命名参数
- configureStore 会自动使用良好的默认设置来设置 store
将 Redux store 提供给 React 应用程序组件
- 在你的 <App /> 周围放置一个 React Redux <Provider> 组件
- 将 Redux store 作为 <Provider store={store}> 传递
使用 createSlice 创建 Redux “切片” reducer
- 使用字符串名称、初始状态和命名 reducer 函数调用 createSlice
- reducer 函数可以使用 Immer “修改”状态
- 导出生成的切片 reducer 和 action creators
在 React 组件中使用 React Redux 的 useSelector/useDispatch 钩子
- 使用 useSelector 钩子从 store 中读取数据
- 使用 useDispatch 钩子获取 dispatch 函数，并根据需要分派 action

完整的计数器应用程序示例

这是一个完整的计数器应用程序，作为运行中的 CodeSandbox

下一步

我们建议您阅读 Redux 核心文档中的“Redux Essentials”和“Redux Fundamentals”教程，这将让您全面了解 Redux 的工作原理，Redux Toolkit 和 React Redux 的作用，以及如何正确使用它们。

React Redux 快速入门

简介​

如何阅读本教程​

使用摘要​

安装 Redux Toolkit 和 React Redux​

创建 Redux Store​

将 Redux Store 提供给 React​

创建 Redux 状态切片​

将切片 reducer 添加到 store​

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

你学到了什么​

完整的计数器应用程序示例​

下一步​

简介