<a href='https://redux.js.org'><img src='https://avatars.githubusercontent.com/u/13142323?s=200&v=4' height='60' alt='Redux 标志' aria-label='redux.js.org' style="display: flex;align-items: center;"/>Redux</a>

Redux 是一个用于可预测和可维护的全局状态管理的 JavaScript 库。

它可以帮助你编写行为一致的应用程序，这些应用程序可以在不同环境（客户端、服务器和原生环境）中运行，并且易于测试。此外，它还提供了出色的开发者体验，例如结合时间旅行调试器的实时代码编辑。

你可以将 Redux 与 React 或任何其他视图库一起使用。Redux 核心非常小（包括依赖项在内只有 2kB），并且拥有丰富的插件生态系统。

Redux Toolkit 是我们官方推荐的编写 Redux 逻辑的方法。它封装了 Redux 核心，并包含了我们认为对构建 Redux 应用程序至关重要的包和函数。Redux Toolkit 内置了我们建议的最佳实践，简化了大多数 Redux 任务，防止了常见错误，并使编写 Redux 应用程序变得更加容易。

GitHub 工作流状态

安装

创建 React Redux 应用

使用 React 和 Redux Toolkit 启动新应用的推荐方式是使用我们官方的 Redux Toolkit + TS 模板，适用于 Vite，或者使用 Next.js 的 with-redux 模板创建新的 Next.js 项目。

这两种方式都已经为相应的构建工具正确配置了 Redux Toolkit 和 React-Redux，并附带了一个小型示例应用，演示了如何使用 Redux Toolkit 的几个功能。

# 使用我们的 Redux+TS 模板的 Vite
# (使用 `degit` 工具克隆并提取模板)
npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

# 使用 `with-redux` 模板的 Next.js
npx create-next-app --example with-redux my-app

我们目前没有官方的 React Native 模板，但推荐以下模板用于标准 React Native 和 Expo：

npm install @reduxjs/toolkit react-redux

仅安装 Redux 核心库：

npm install redux

更多详情，请参阅安装文档页面。

文档

Redux 核心文档位于 **https://redux.js.org**，包括完整的 Redux 教程以及关于一般 Redux 模式的使用指南：

Redux Toolkit 文档可在 https://redux-toolkit.js.org 找到，包括 Redux Toolkit 中所有 API 的 API 参考和使用指南。

学习 Redux

Redux 精要教程

Redux 精要教程是一个"自上而下"的教程，教授"如何正确使用 Redux"，使用我们最新推荐的 API 和最佳实践。我们建议从这里开始。

Redux 基础教程

Redux 基础教程是一个"自下而上"的教程，从最基本的原理教授"Redux 如何工作"，不使用任何抽象，并解释为什么存在标准的 Redux 使用模式。

帮助和讨论

Reactiflux Discord 社区 的 #redux 频道 是我们所有与学习和使用 Redux 相关问题的官方资源。Reactiflux 是一个很棒的地方，可以在那里闲逛、提问和学习 - 请来加入我们！

在继续之前

Redux 是组织状态的有价值工具，但你也应该考虑它是否适合你的情况。请不要仅仅因为有人说你应该使用 Redux 就使用它 - 相反，请花些时间了解使用它的潜在好处和权衡。

以下是何时使用 Redux 合理的一些建议：

你有相当数量的随时间变化的数据
你需要一个单一的真实来源来管理你的状态
你发现将所有状态保存在顶层组件中已经不够用了

是的，这些指南是主观和模糊的，但这是有充分理由的。每个用户和每个应用程序应该集成 Redux 的时机都是不同的。

关于 Redux 应该如何使用的更多思考，请参阅：<br>

何时（以及何时不）使用 Redux

你可能不需要 Redux<br>

Redux 之道，第 1 部分 - 实现和意图<br>

Redux 之道，第 2 部分 - 实践和哲学

Redux 常见问题

基本示例

你的应用程序的整个全局状态被存储在单个 store 内的对象树中。改变状态树的唯一方法是创建一个 action（描述发生了什么的对象）并将其 dispatch 到 store。为了指定状态如何响应 action 进行更新，你需要编写纯 reducer 函数，这些函数根据旧状态和 action 计算新状态。

Redux Toolkit 简化了编写 Redux 逻辑和设置 store 的过程。使用 Redux Toolkit，基本的应用逻辑如下所示：

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Redux Toolkit 允许我们在 reducer 中编写"变更"逻辑。它
      // 实际上并不会变更状态，因为它使用了 Immer 库，
      // 该库检测对"草稿状态"的更改并基于这些更改生成全新的
      // 不可变状态
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

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

// 仍然可以订阅 store
store.subscribe(() => console.log(store.getState()))

// 仍然将 action 对象传递给 `dispatch`，但它们是为我们创建的
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}