示例应用

相关源文件

• .eslintignore
• examples/async/package.json
• examples/counter/package.json
• examples/real-world/package.json
• examples/shopping-cart/package.json
• examples/todomvc/package.json
• examples/todomvc/src/components/App.spec.js
• examples/todos-with-undo/package.json
• examples/todos/package.json
• examples/tree-view/package.json
• examples/universal/package.json
• examples/universal/webpack.config.js
• package.json

目的与范围

本文档全面概述了 Redux 仓库中包含的示例应用程序。这些示例以不同复杂程度实际演示了 Redux 的概念、模式和最佳实践。它们旨在帮助开发者理解如何在实际场景中实现 Redux，从简单的计数器应用到复杂的数据获取示例。

有关 Redux 的核心概念和原则，请参阅 Redux 概览。有关项目结构模式的详细信息，请参阅 项目结构和组织。

示例概览

Redux 仓库包含多个示例应用程序，演示了 Redux 用法的不同方面，从基本状态管理到包含中间件、异步操作和服务器端渲染的高级模式。

来源

• examples/counter/package.json1-43
• examples/todos/package.json1-27
• examples/todomvc/package.json1-31
• examples/todos-with-undo/package.json1-28
• examples/tree-view/package.json1-29
• examples/shopping-cart/package.json1-31
• examples/async/package.json1-29
• examples/real-world/package.json1-36
• examples/universal/package.json1-33

示例应用程序详情

基本示例

计数器

计数器示例是最简单的 Redux 应用程序，以最小的复杂性演示了 Redux 核心概念。它阐释了包含 actions、reducers 和 state 的基本 Redux 工作流。

主要功能

• 使用 Redux Toolkit 的现代实现
• 简单的增/减操作
• React 18 和 React Redux 9 集成

使用的技术

• @reduxjs/toolkit (v2.1.0)
• React 18
• React Redux 9

来源

• examples/counter/package.json1-43

待办事项

待办事项示例演示了一个使用 Redux 的基本待办事项列表应用程序，展示了如何在 Redux store 中管理项目列表。

主要功能

• 添加、切换和筛选待办事项
• 用于不同状态切片（state slices）的多个 reducer
• 基本的 React-Redux 集成

使用的技术

• Redux (v4.0.5)
• React 17
• React Redux 7

来源

• examples/todos/package.json1-27

中级示例

TodoMVC

TodoMVC 示例使用 Redux 实现了经典的 TodoMVC 规范，演示了更高级的状态管理模式。

主要功能

• 完整的 TodoMVC 实现
• 高级筛选和选择
• 使用 reselect 的选择器（selectors）用法
• 使用 react-test-renderer 进行组件测试

使用的技术

• Redux (v4.0.5)
• React 17
• React Redux 7
• Reselect 用于记忆化选择器（memoized selectors）
• classnames 用于条件 CSS 类

来源

• examples/todomvc/package.json1-31
• examples/todomvc/src/components/App.spec.js1-31

带撤销功能的待办事项

此示例通过使用 redux-undo 库添加撤销/重做功能，扩展了基本的待办事项应用程序。

主要功能

• 状态更改的撤销/重做功能
• 与外部历史中间件集成
• 演示增强器（enhancer）模式

使用的技术

• Redux (v4.0.5)
• React 17
• React Redux 7
• redux-undo (v0.6.1)

来源

• examples/todos-with-undo/package.json1-28

树状视图

树状视图示例演示了如何在 Redux 中表示和操作嵌套数据结构。

主要功能

• 嵌套状态表示
• 添加和删除嵌套节点
• 深度不变性模式
• 使用 deep-freeze 进行测试

使用的技术

• Redux (v4.0.5)
• React 17
• React Redux 7
• deep-freeze 用于不变性测试
• Enzyme 用于组件测试

来源

• examples/tree-view/package.json1-29

购物车

购物车示例演示了一个更真实的电子商务应用程序，包含异步 actions 和多层状态结构。

主要功能

• 产品目录和购物车实现
• 使用 redux-thunk 的异步操作
• 使用 redux-logger 进行 action 日志记录
• 使用 Enzyme 进行组件测试

使用的技术

• Redux (v4.0.5)
• React 17
• React Redux 7
• redux-thunk 用于异步操作
• redux-logger 用于 action 日志记录

来源

• examples/shopping-cart/package.json1-31

高级示例

异步

异步示例专门关注 Redux 应用程序中异步操作的处理。

主要功能

• 使用 async/await 进行 API 调用
• 加载状态和错误处理
• 用于异步 actions 的中间件
• 使用 redux-logger 进行详细日志记录

使用的技术

• Redux (v4.0.5)
• React 17
• React Redux 7
• redux-thunk 用于异步操作
• redux-logger 用于 action 日志记录

来源

• examples/async/package.json1-29

实际应用

实际应用示例是一个全面的实现，在更复杂的应用程序场景中演示了 Redux，包括 API 集成、路由和数据规范化。

主要功能

• GitHub API 集成
• 使用 normalizr 进行状态规范化
• 使用 react-router 处理路由
• DevTools 集成。
• 高级日志记录

使用的技术

• Redux (v4.0.5)
• React 17
• React Redux 7
• redux-thunk 用于异步操作
• normalizr 用于数据规范化
• react-router-dom 用于路由
• Redux DevTools 用于调试

来源

• examples/real-world/package.json1-36

通用（SSR）

通用示例演示了使用 Redux 和 React 的服务器端渲染，展示了如何在服务器和客户端之间共享状态。

主要功能

• 使用 Express 的服务器端渲染
• 状态水合/脱水
• 通用应用程序的 Webpack 配置
• 模块热替换

使用的技术

• Redux (v4.0.5)
• React 17
• React Redux 7
• Express 用于服务器端渲染
• Webpack 用于打包
• Babel 用于转译

来源

• examples/universal/package.json1-33
• examples/universal/webpack.config.js1-27

技术和架构

下图展示了示例应用程序中使用的架构组件和技术

来源

• examples/real-world/package.json1-36
• examples/todomvc/package.json1-31
• examples/universal/package.json1-33
• examples/todos-with-undo/package.json1-28
• examples/shopping-cart/package.json1-31
• examples/async/package.json1-29

示例应用程序和学习路径

下表提供了使用示例应用程序从基础到高级的学习路径建议

复杂度	示例	核心概念	技术焦点
基础	计数器	- 简单状态 - 基本 actions - 单一 reducer	Redux Toolkit
基础	待办事项	- 列表状态 - 多个 actions - 筛选	Redux 核心
中级	TodoMVC	- 完整的 CRUD - 选择器（Selectors） - 组件测试	Reselect
中级	带撤销功能的待办事项	- 历史管理 - 状态增强器（State enhancers）	redux-undo
中级	树状视图	- 嵌套状态 - 递归组件 - 不变性	深度不变性
中级	购物车	- 实体关系 - 购物车操作 - 基本异步	redux-thunk
高级	异步	- API 集成 - 加载状态 - 错误处理	redux-thunk, async/await
高级	实际应用	- 规范化数据 - 高级路由 - 复杂 API	normalizr, react-router
高级	通用	- 服务器渲染 - 状态共享 - 构建配置	Express, Webpack

来源

• examples/counter/package.json1-43
• examples/todos/package.json1-27
• examples/todomvc/package.json1-31
• examples/todos-with-undo/package.json1-28
• examples/tree-view/package.json1-29
• examples/shopping-cart/package.json1-31
• examples/async/package.json1-29
• examples/real-world/package.json1-36
• examples/universal/package.json1-33

Redux 模式演示

下图展示了示例应用程序中演示的关键 Redux 模式

来源

• examples/counter/package.json1-43
• examples/todos/package.json1-27
• examples/todomvc/package.json1-31
• examples/todos-with-undo/package.json1-28
• examples/tree-view/package.json1-29
• examples/shopping-cart/package.json1-31
• examples/async/package.json1-29
• examples/real-world/package.json1-36
• examples/universal/package.json1-33

运行示例

所有示例应用程序都使用相似的结构，可以通过以下命令运行

1. 导航到示例目录

   cd examples/[example-name]
   

2. 安装依赖项

   npm install
   

   或

   yarn
   

3. 启动开发服务器

   npm start
   

   或

   yarn start
   

对于通用示例，命令是相同的，但应用程序在 Node.js 上运行，并使用 Express 进行服务器端渲染。

来源

• examples/counter/package.json19-24
• examples/todos/package.json15-20
• examples/todomvc/package.json19-24
• examples/todos-with-undo/package.json16-21
• examples/tree-view/package.json17-22
• examples/shopping-cart/package.json19-24
• examples/async/package.json17-22
• examples/real-world/package.json24-29
• examples/universal/package.json5-8

结论

Redux 仓库中的示例应用程序提供了一套全面的参考实现，逐步演示了从基础到高级的 Redux 概念。通过研究这些示例，开发者可以获得对以下内容的实际理解：

1. Redux 核心状态管理模式
2. 通过 react-redux 与 React 集成
3. 使用中间件处理异步操作
4. 高级模式，如规范化和选择器（selectors）
5. 使用 Redux 进行服务器端渲染

这些示例既可以作为学习工具，也可以作为可用于实际应用程序的参考实现。