Examples: Redux interactive example apps">Examples: Redux interactive example apps">
跳至主要内容

示例

Redux 在其 源代码 中附带了一些示例。大多数这些示例也都在 CodeSandbox 上，这是一个在线编辑器，可以让您在线玩示例。

计数器 Vanilla​

运行 计数器 Vanilla 示例

git clone https://github.com/reduxjs/redux.git

cd redux/examples/counter-vanilla
open index.html

或者查看 沙盒

它不需要构建系统或视图框架，并且存在于展示使用 ES5 的原始 Redux API。

计数器​

运行 Counter 示例

git clone https://github.com/reduxjs/redux.git

cd redux/examples/counter
npm install
npm start

或者查看 沙盒

这是将 Redux 与 React 结合使用的最基本示例。为了简单起见，它在存储发生变化时手动重新渲染 React 组件。在实际项目中，您可能希望使用高性能的 React Redux 绑定。

此示例包含测试。

待办事项​

运行 待办事项 示例

git clone https://github.com/reduxjs/redux.git

cd redux/examples/todos
npm install
npm start

或者查看 沙盒

这是深入了解 Redux 中状态更新如何与组件协同工作的最佳示例。它展示了 reducer 如何将操作处理委托给其他 reducer，以及如何使用 React Redux 从您的展示组件生成容器组件。

此示例包含测试。

带有撤销的待办事项​

运行 带有撤销的待办事项 示例

git clone https://github.com/reduxjs/redux.git

cd redux/examples/todos-with-undo
npm install
npm start

或者查看 沙盒

这是对先前示例的变体。它几乎完全相同，但另外还展示了如何使用 Redux Undo 包装您的 reducer，只需几行代码即可为您的应用程序添加撤销/重做功能。

TodoMVC​

运行 TodoMVC 示例

git clone https://github.com/reduxjs/redux.git

cd redux/examples/todomvc
npm install
npm start

或者查看 沙盒

这是经典的 TodoMVC 示例。它在这里是为了比较，但它涵盖了与待办事项示例相同的要点。

此示例包含测试。

购物车​

运行 购物车 示例

git clone https://github.com/reduxjs/redux.git

cd redux/examples/shopping-cart
npm install
npm start

或者查看 沙盒

此示例展示了随着应用程序增长变得重要的重要 Redux 惯用模式。特别是，它展示了如何通过其 ID 以规范化的方式存储实体，如何在多个级别上组合 reducer，以及如何在 reducer 旁边定义选择器，以便将有关状态形状的知识封装起来。它还演示了使用 Redux Logger 进行日志记录，以及使用 Redux Thunk 中间件有条件地调度操作。

树形视图​

运行 树形视图 示例

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 进行 服务器渲染 的基本演示。它展示了如何在服务器上准备初始存储状态，并将其传递给客户端，以便客户端存储可以从现有状态启动。

真实世界​

运行 真实世界 示例

git clone https://github.com/reduxjs/redux.git

cd redux/examples/real-world
npm install
npm start

或者查看 沙盒

这是最先进的示例。它设计上很密集。它涵盖了将获取的实体保存在规范化缓存中，为 API 调用实现自定义中间件，渲染部分加载的数据，分页，缓存响应，显示错误消息以及路由。此外，它还包括 Redux DevTools。

更多示例​

您可以在 Redux 应用和示例 页面上找到更多示例 Redux 附加组件目录.