Redux - 安装

Redux - 安装

前提条件

在安装 Redux 之前，请确保你已安装 Node.js 和一个包管理器 (npm, Yarn 或 pnpm)。Node.js 默认包含 npm。

• 访问 https://nodejs.org/ 下载并安装适用于你操作系统的最新 LTS (长期支持) 版本。
• 按照安装程序的说明进行操作。
• 通过打开终端或命令行并输入以下命令来验证安装：
• node -v (应显示 Node.js 版本)
• npm -v (应显示 npm 版本)

安装 Redux Toolkit (推荐)

使用 Redux 的官方推荐方式是使用 Redux Toolkit (@reduxjs/toolkit)。它包含了 Redux 核心、基本中间件 (如 Thunk) 以及简化 reducer 逻辑和 store 配置的工具。

在你的项目目录中运行以下命令之一：

# With npm
npm install @reduxjs/toolkit

# With Yarn
yarn add @reduxjs/toolkit

# With pnpm
pnpm add @reduxjs/toolkit

与 React 集成

如果你将 Redux 与 React 一起使用 (这是最常见的用例)，你还需要官方的 React Redux 绑定库 (react-redux)。这个库提供了组件和 hook (例如 <Provider>, useSelector, useDispatch)，用于将你的 React 组件连接到 Redux store。

# With npm
npm install react-redux

# With Yarn
yarn add react-redux

# With pnpm
pnpm add react-redux

因此，对于典型的 React 项目，你通常会同时安装这两个库：

npm install @reduxjs/toolkit react-redux
# or
yarn add @reduxjs/toolkit react-redux
# or
pnpm add @reduxjs/toolkit react-redux

设置 Redux DevTools

为了方便调试，强烈建议使用 Redux DevTools 扩展程序。这个扩展程序不是通过 npm/yarn 安装的；它是一个浏览器扩展程序。

• 为你的浏览器 (Chrome, Firefox, Edge 等) 安装该扩展程序。相关链接在本教程的 ‘Redux - Devtools’ 部分提供，或者通过网络搜索 ‘Redux DevTools Extension’ 获取。
• 如果你使用 @reduxjs/toolkit，在使用 configureStore 时，DevTools 集成在开发模式下会自动启用。通常无需额外的包安装或代码配置，扩展程序即可工作。

旧版安装 (不推荐用于新项目)

如果你需要安装 Redux 核心库而不使用 Toolkit (适用于旧项目或特定原因)，你可以安装 redux 包：

# Legacy - Installs only the Redux core
npm install redux
# or
yarn add redux
# or
pnpm add redux

然而，强烈建议所有新的 Redux 应用程序使用 @reduxjs/toolkit，因为它遵循最佳实践来配置 store，并显著减少样板代码。