Redux 6 - 入门：生态系统（Ecosystem）&& Redux 7

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

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

该示例运行不依赖编译系统，也不依赖视图框架，使用ES5语法直接演示原生Redux API的使用方法。

运行Counter示例：

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

cd redux/examples/counter
npm install
npm start

open http://localhost:3000/

这是一个最简单的Redux和React一起使用的示例。简单起见，当store发生变化时，会手动重新渲染React组件。

该示例包含相应的完整测试用例。

运行Todos示例：

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

cd redux/examples/todos
npm install
npm start

open http://localhost:3000/

这是更好的理解如何在Redux中进行组件状态更新的示例。它演示了Reducer如何集成在一起处理响应，以及如何使用React Redux来生成容器组件。

该示例包含相应的完整测试用例。

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

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

open http://localhost:3000/

该示例是上一个示例的变体，两者基本上相同，但是这个示例演示了如何使用Redux Undo在仅仅添加几行代码的情况下包装Reducer为程序添加Undo/Redo功能。

运行TodoMVC示例：

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

cd redux/examples/todomvc
npm install
npm start

open http://localhost:3000/

这是经典的TodoMVC示例翻版。放在这里仅仅是为了做比较，但是涵盖了和Todos示例完全相同的功能点。

该示例包含相应的完整测试用例。

运行Shopping Cart示例：

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

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

open http://localhost:3000/

这个示例演示了在不断膨胀的应用中通常所使用Redux的模式。特别是，它展示了在标准模式中如何根据ID存储实例，如何在不同的粒度上组织Selector，以及如何定义Selector获取需要的State。并同时演示了Redux Logger中间件记录日志和通过Redux Thunk中间件派发行为。

运行Tree View示例：

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

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

open http://localhost:3000/

这个示例演示了如何渲染一个树形视图，以及如何将其状态组织成一个规范化的形式以便于在Reducer中进行更新。最后，通过在容器组件中对树节点的订阅实现了一个较好的渲染性能。

该示例包含相应的完整测试用例。

运行Async示例：

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

cd redux/examples/async
npm install
npm start

open http://localhost:3000/

该示例包含异步API读取，获取用户输入，加载指示器，缓存响应，以及清除缓存。通过使用Redux Thunk来封装异步操作。

运行Universal示例：

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

cd redux/examples/universal
npm install
npm start

open http://localhost:3000/

这是一个基础的基于Redux和React进行的服务器端渲染示例。展示了如何在服务器端准备初始化数据，以及如何将这个状态传递到客户端以便于客户端从同一个状态启动。

运行Real World示例：

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

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

open http://localhost:3000/

这是目前最高级的经过精心设计的示例。其涵盖了响应实体的规范化缓存，实现API调用中间件，部分数据加载渲染，分页，响应缓存，错误信息展示，以及路由的使用。另外，这个示例中使用了Redux DevTools。

liqian