示例

Redux 源码 中同时包含了一些示例。这些示例中的大多数也在CodeSandbox上，这是一个在线编辑器，可让您在线测试示例。

原生版 Counter

运行 Counter Vanilla 示例:

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

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

该示例不需搭建系统或视图框架，展示了基于 ES5 的原生 Redux API。

Counter

运行 Counter 示例：

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

cd redux/examples/counter
npm install
npm start
copy

或者可以浏览在线示例。

这是 Redux 结合 React 使用的最基本示例。出于简化，当 store 发生变化，React 组件会手动重新渲染。在实际的项目中，推荐使用 React 和更高效的 React Redux绑定。

该示例包含测试代码。

Todos

运行 Todos 示例：

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

cd redux/examples/todos
npm install
npm start
copy

或者可以浏览在线示例。

这个例子可以帮助你深入理解在 Redux 中 state 的更新与组件是如何共同运作的。展示了 reducer 如何委派 action 给其它 reducer，也展示了如何使用 React Redux 从展示组件中生成容器组件。

该示例包含测试代码。

支持撤销的 Todos

运行 Todos-with-undo 示例:

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

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

或者可以浏览在线示例。

此示例是前一个示例的变体。它与上一个示例基本相同但额外展示了如何使用 Redux Undo 打包 reducer，仅增加几行代码实现撤销/重做功能。

TodoMVC

运行 TodoMVC 示例:

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

cd redux/examples/todomvc
npm install
npm start
copy

或者可以浏览在线示例。

经典的 TodoMVC 示例。与 Todos 示例的目的相同，可以通过这个示例比较和其他框架的异同。

该示例包含测试代码。

购物车

运行 Shopping Cart 示例：

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

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

或者可以浏览在线示例。

该示例展示了随着应用升级变得愈发重要的常用的 Redux 模式。尤其展示了，如何使用 ID 来标准化存储数据实体，如何在不同层级将多个 reducer 组合使用，如何利用 reducer 定义选择器以封装 state 的相关内容。该示例也展示了使用 Redux Logger 生成日志，以及使用 Redux Thunk 中间件进行 action 的条件性分发。

树状视图

运行 Tree View 示例:

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

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

或者可以浏览在线示例。

该示例展示了深层嵌套树状视图的渲染，以及为了方便 reducer 更新，state 的标准化写法。优良的渲染表现，来自于容器组件细粒度的、仅针对需要渲染的 tree node 的绑定。

该示例包含测试代码。

异步

运行 Async 示例：

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

cd redux/examples/async
npm install
npm start
copy

或者可以浏览在线示例。

该示例包含了：从异步 API 的读取操作、基于用户的输入来获取数据、显示正在加载的提示、缓存响应、以及使缓存过期失效。使用 Redux Thunk 中间件来封装异步带来的附带作用。

同构

运行 Universal 示例:

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

cd redux/examples/universal
npm install
npm start
copy

这是使用 Redux 和 React 的服务端渲染 的基本演示。 它演示了如何在服务器上准备初始 store state，并将其传递给客户端，以便客户端 store 可以从现有 state 启动。

真实场景

运行 Real World 示例：

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

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

或者可以浏览在线示例。

最为复杂的示例。浓缩化的设计，包含了持续性地从标准化缓存中批量获取数据实例，针对 API 调用的自定义中间件的实现，逐步渲染已加载的数据、分页器、缓存响应，展示错误信息，以及路由。同时，包含了调试工具 Redux DevTools 。

更多示例

前往 Awesome Redux 获取更多 Redux 示例。