React/Redux 项目安装指南：从基础到进阶配置

React/Redux 项目安装指南：从基础到进阶配置

redux 项目地址: https://gitcode.com/gh_mirrors/red/redux

前言

Redux 作为 React 生态中最流行的状态管理工具，其安装和配置过程直接影响后续开发体验。本文将系统性地介绍 Redux 及其相关生态的安装方法，帮助开发者根据项目需求选择合适的安装方案。

核心安装方案

1. Redux Toolkit（推荐方案）

Redux Toolkit 是官方推荐的 Redux 开发工具集，它包含了 Redux 核心以及开发中必需的配套工具：

• 内置 Redux 核心库
• 集成 Redux Thunk（处理异步操作）
• 包含 Reselect（优化选择器性能）
• 提供标准化项目结构

安装命令：

# 使用 npm
npm install @reduxjs/toolkit

# 使用 yarn
yarn add @reduxjs/toolkit

优势：

• 简化 Redux 配置流程
• 减少样板代码
• 内置性能优化
• 提供最佳实践实现

2. 单独安装 Redux 核心

对于需要精细控制或特殊定制的项目，可以选择仅安装 Redux 核心：

# 使用 npm
npm install redux

# 使用 yarn
yarn add redux

适用场景：

• 需要自定义中间件方案
• 项目对包体积极度敏感
• 非 React 环境使用 Redux

React 项目必备配套工具

React-Redux 绑定库

无论采用哪种 Redux 安装方式，在 React 项目中都需安装 react-redux：

npm install react-redux

关键功能：

• 提供 Provider 组件注入 store
• 包含 useSelector/useDispatch 等 Hook API
• 优化组件重渲染性能

开发工具增强

Redux DevTools 扩展

Redux Toolkit 已自动配置 DevTools 集成，但需要安装浏览器扩展才能使用：

• Chrome 扩展：Redux DevTools
• Firefox 扩展：Redux DevTools

功能特性：

• 实时查看状态变化
• 时间旅行调试
• 动作日志记录

React DevTools 扩展

建议配合安装 React 开发者工具：

• Chrome 扩展：React Developer Tools
• Firefox 扩展：React DevTools

项目脚手架推荐

基于 Vite 的模板

npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

特点：

• 预配置 TypeScript 支持
• 集成 Redux Toolkit + React-Redux
• 包含示例代码

Next.js 项目模板

npx create-next-app --example with-redux my-app

特点：

• 服务端渲染友好配置
• 开箱即用的 Redux 集成
• 支持静态导出

注意事项

1. 构建工具建议：推荐使用 Vite 或 Webpack 等现代构建工具
2. 浏览器兼容性：现代浏览器原生支持 ESM 模块
3. 版本管理：建议锁定主要版本号以保证稳定性
4. TypeScript 支持：所有官方包都包含类型定义文件

通过以上安装方案，开发者可以根据项目规模和技术栈选择最适合的 Redux 配置方式。对于大多数新项目，建议直接从 Redux Toolkit 开始，以获得最佳的开发体验和可维护性。

redux 项目地址: https://gitcode.com/gh_mirrors/red/redux