Skip to main content

示例

¥Examples

Redux 在其 源代码 中发布了一些示例。这些示例中的大多数也在 CodeSandbox 上，这是一个在线编辑器，可让你在线使用这些示例。

¥Redux is distributed with a few examples in its source code. Most of these examples are also on CodeSandbox, an online editor that lets you play with the examples online.

普通计数器​

¥Counter Vanilla

运行 普通计数器 示例：

¥Run the Counter Vanilla example:

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

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

或者查看 sandbox：

¥Or check out the sandbox:

它不需要构建系统或视图框架，其存在是为了显示与 ES5 一起使用的原始 Redux API。

¥It does not require a build system or a view framework and exists to show the raw Redux API used with ES5.

计数器​

¥Counter

运行 计数器 示例：

¥Run the Counter example:

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

cd redux/examples/counter
npm install
npm start

或者查看 sandbox：

¥Or check out the sandbox:

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

¥This is the most basic example of using Redux together with React. For simplicity, it re-renders the React component manually when the store changes. In real projects, you will likely want to use the highly performant React Redux bindings instead.

此示例包括测试。

¥This example includes tests.

Todos​

运行 Todos 示例：

¥Run the Todos example:

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

cd redux/examples/todos
npm install
npm start

或者查看 sandbox：

¥Or check out the sandbox:

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

¥This is the best example to get a deeper understanding of how the state updates work together with components in Redux. It shows how reducers can delegate handling actions to other reducers, and how you can use React Redux to generate container components from your presentational components.

此示例包括测试。

¥This example includes tests.

具有撤消功能的待办事项​

¥Todos with Undo

运行 具有撤消功能的待办事项 示例：

¥Run the Todos with Undo example:

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

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

或者查看 sandbox：

¥Or check out the sandbox:

这是上一个示例的变体。它几乎是相同的，但还展示了如何使用 还原撤消 封装你的 reducer，让你可以通过几行代码向你的应用添加撤消/重做功能。

¥This is a variation on the previous example. It is almost identical, but additionally shows how wrapping your reducer with Redux Undo lets you add a Undo/Redo functionality to your app with a few lines of code.

TodoMVC​

运行 TodoMVC 示例：

¥Run the TodoMVC example:

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

cd redux/examples/todomvc
npm install
npm start

或者查看 sandbox：

¥Or check out the sandbox:

这是经典的 TodoMVC 示例。此处是为了进行比较，但它涵盖了与 Todos 示例相同的要点。

¥This is the classical TodoMVC example. It's here for the sake of comparison, but it covers the same points as the Todos example.

此示例包括测试。

¥This example includes tests.

购物车​

¥Shopping Cart

运行 购物车 示例：

¥Run the Shopping Cart example:

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

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

或者查看 sandbox：

¥Or check out the sandbox:

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

¥This example shows important idiomatic Redux patterns that become important as your app grows. In particular, it shows how to store entities in a normalized way by their IDs, how to compose reducers on several levels, and how to define selectors alongside the reducers so the knowledge about the state shape is encapsulated. It also demonstrates logging with Redux Logger and conditional dispatching of actions with Redux Thunk middleware.

树视图​

¥Tree View

运行 树视图 示例：

¥Run the Tree View example:

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

cd redux/examples/tree-view
npm install
npm start

或者查看 sandbox：

¥Or check out the sandbox:

此示例演示了渲染深度嵌套的树视图并以规范化形式表示其状态，以便可以轻松地从化简器进行更新。良好的渲染性能是通过容器组件仅精细地订阅它们渲染的树节点来实现的。

¥This example demonstrates rendering a deeply nested tree view and representing its state in a normalized form so it is easy to update from reducers. Good rendering performance is achieved by the container components granularly subscribing only to the tree nodes that they render.

此示例包括测试。

¥This example includes tests.

异步​

¥Async

运行 异步 示例：

¥Run the Async example:

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

cd redux/examples/async
npm install
npm start

或者查看 sandbox：

¥Or check out the sandbox:

此示例包括从异步 API 读取、响应用户输入获取数据、显示加载指示器、缓存响应以及使缓存失效。它使用 Redux Thunk 中间件来封装异步副作用。

¥This example includes reading from an asynchronous API, fetching data in response to user input, showing loading indicators, caching the response, and invalidating the cache. It uses Redux Thunk middleware to encapsulate asynchronous side effects.

普遍的​

¥Universal

运行 普遍的 示例：

¥Run the Universal example:

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

cd redux/examples/universal
npm install
npm start

这是 服务器渲染 与 Redux 和 React 的基本演示。它展示了如何在服务器上准备初始存储状态，并将其传递到客户端，以便客户端存储可以从现有状态启动。

¥This is a basic demonstration of server rendering with Redux and React. It shows how to prepare the initial store state on the server, and pass it down to the client so the client store can boot up from an existing state.

真实世界​

¥Real World

运行 真实世界 示例：

¥Run the Real World example:

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

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

或者查看 sandbox：

¥Or check out the sandbox:

这是最高级的例子。它的设计很密集。它涵盖将获取的实体保留在标准化缓存中、为 API 调用实现自定义中间件、渲染部分加载的数据、分页、缓存响应、显示错误消息和路由。此外，它还包括 Redux DevTools。

¥This is the most advanced example. It is dense by design. It covers keeping fetched entities in a normalized cache, implementing a custom middleware for API calls, rendering partially loaded data, pagination, caching responses, displaying error messages, and routing. Additionally, it includes Redux DevTools.

更多示例​

¥More Examples

你可以在 Redux 插件目录 的 Redux 应用和示例 页面中找到更多示例。

¥You can find more examples in the Redux Apps and Examples page of the Redux Addons Catalog.