39、使用 Redux 管理状态

使用 Redux 管理状态

在 React 应用中使用 reducer 管理状态时，我们会遇到将异步操作与 reducer 集成的问题。为了解决这个问题，我们可以使用 Redux 及其相关库，如 React Toolkit 和 React Redux。

1. Redux 简介

Redux 是一种更复杂的 reducer 和存储模式，它支持比我们目前所需更复杂的 reducer 和操作组合。它自称为 “JS 应用的可预测状态容器”，其中 “状态容器” 指的是我们所说的存储，“可预测” 指的是 reducer 提供的状态对象不会在背后改变。

React Redux 是将 Redux 与 React 绑定的库，而 Redux Toolkit 则是 “官方、有主见、自带电池的高效 Redux 开发工具集”，它提供了更有用的 API，是使用 Redux 的推荐方式。

2. 安装和使用 Redux

首先，我们需要安装 Redux 和 React 的 Redux 绑定：

$ yarn add @reduxjs/toolkit react-redux

当前推荐通过 @reduxjs/toolkit 包使用 Redux，它为创建 Redux reducer 提供了更有用的 API。核心 Redux 包和 TypeScript 定义将作为这些包的依赖自动加载。

需要注意的是，新版本的 Redux 可能会触发 TypeScript 错误，我们可以通过在 tsconfig.json