本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →
示例
Redux 在其源代码中提供了一些示例。这些示例大多也可以在在线编辑器 CodeSandbox 上找到，您可以直接在线操作这些示例。
原生计数器
运行原生计数器示例：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/counter-vanilla
open index.html
或在sandbox中查看：
此示例无需构建系统或视图框架，专门用于展示在 ES5 环境中直接使用 Redux API 的方式。
计数器
运行计数器示例：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/counter
npm install
npm start
或在sandbox中查看：
这是 React 与 Redux 结合使用的最基础示例。为简化实现，它在 store 变更时手动重新渲染 React 组件。在实际项目中，建议改用高性能的 React Redux 绑定库。
此示例包含测试。
待办事项
运行待办事项示例：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos
npm install
npm start
或在sandbox中查看：
这是深入理解 Redux 中状态更新如何与组件协作的最佳示例。它展示了 reducer 如何将 action 处理委托给其他 reducer，以及如何使用 React Redux 从展示组件生成容器组件。
此示例包含测试。
支持撤销的待办事项
运行支持撤销的待办事项示例：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos-with-undo
npm install
npm start
或在sandbox中查看：
这是前一个示例的变体，两者几乎完全相同。额外展示了如何用 Redux Undo 包装 reducer，仅需几行代码即可为应用添加撤销/重做功能。
TodoMVC
运行TodoMVC示例：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todomvc
npm install
npm start
或在sandbox中查看：
这是经典的 TodoMVC 实现示例。提供此示例是为了方便比较，其核心内容与待办事项示例相同。
此示例包含测试。
购物车
运行购物车示例：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/shopping-cart
npm install
npm start
或在sandbox中查看：
此示例展示了随着应用规模增长而变得至关重要的 Redux 典型模式。具体而言，它演示了如何通过实体 ID 以规范化方式存储数据、如何在多个层级组合 reducer，以及如何与 reducer 一同定义选择器以封装状态结构的实现细节。同时示例还展示了使用 Redux Logger 进行日志记录，以及通过 Redux Thunk 中间件实现条件式 action 派发。
树视图
运行 树视图 示例：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/tree-view
npm install
npm start
或在 沙盒 中查看：
此示例演示如何渲染深度嵌套的树状结构，并通过规范化形式表示其状态以便 reducer 轻松更新。容器组件通过细粒度订阅仅渲染相关树节点，实现了良好的渲染性能。
此示例包含测试。
异步
运行 异步 示例：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/async
npm install
npm start
或在 沙盒 中查看：
此示例涵盖从异步 API 读取数据、响应用户输入获取数据、显示加载指示器、响应缓存及缓存失效等场景。它使用 Redux Thunk 中间件封装异步副作用。
同构
运行 同构 示例：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/universal
npm install
npm start
这是 Redux 与 React 实现服务器端渲染的基础演示。它展示如何在服务端准备初始 store 状态，并将其传递给客户端以便从现有状态启动客户端 store。
真实场景
运行 真实场景 示例：
git clone https://github.com/reduxjs/redux.git
cd redux/examples/real-world
npm install
npm start
或在 沙盒 中查看：
这是最复杂的高级示例，其设计理念是高度集成。它涵盖以下内容：将获取的实体存入规范化缓存、实现自定义 API 调用中间件、渲染部分加载数据、分页处理、响应缓存、错误消息显示和路由管理。此外还包含 Redux DevTools 集成。
更多示例
您可以在 Redux 插件目录 的 Redux 应用与示例 页面找到更多示例。