通过前面的教程，我们有了简单的环境，并且可以运行 <code>redux</code> 的程序，也对 如何编写redux示例 有了初步的印象；
掌握了 使用redux控制状态转移，继而驱动 react 组件发生改变，这才是学习redux的初衷。
本篇我们将 redux 和 react 联合起来，着重讲解 <code>redux-react</code> 模块的使用；
在原有的基础上，我们编写红绿灯组件：
在 components/light/index.js 中写react代码，其结构非常简单：
根据更改样式类名（'red'、'green'、'yellow'），从而移动 sprite图 产生灯变换的效果：
修改 components/light/demo.js 文件代码为：
这样就能通过 http://localhost:3000/light/demo 预览这个组件了；
有了react和之前的redux，现在就要将两者链接起来了。我们的目标是让红绿灯运行起来，就好比平时在十字路口看到的那样；
再创建一个示例文件，就不叫demo了，叫做<code>redux</code>好了：
之所以示例文件名称为 <code>demo.js</code> 或 <code>redux.js</code> ，是因为我在 webpack.config.js 中配置了，如果想用其他的文件名，只要依样画葫芦就可以；
首先在 components/light/redux.js 中输入最基本的脚手架代码，引入所需要的组件或模块：
继而创建一个 app react类 ，作为总的容器，将上述的 light 组件放入其中：
上面的代码还是个半成品，看不到效果；简单描述一下上面的代码做了什么：
定义 <code>app</code> 容器，将 light 组件放在其 <code>render</code> 方法中
constructor 方法引用了 _bind方法，方便一次性绑定 <code>this</code> 上下文，该方法来自文章 refactoring react components to es6 classes
handleclick 方法是纯粹是为了演示，当用户点击红绿灯的时候，红绿灯调用 autochange方法 开始自动变换，用户再次点击的时候就停止变换；
autochange 方法用于红绿灯状态自动转换的，这里占位；本质是使用 <code>settimeout</code> 代替 <code>setinterval</code> 实现；
这是最为关键的一个步骤，
这里使用 react-redux 提供 <code>connect</code> 的方法 链接react组件和redux类：
connect 方法不会改变原来的组件类，反而返回一个新的 已与 redux store 连接的 组件类。注意这里并没有注入<code>store</code> 对象，真正 <code>store</code> 对象的注入靠最后的 <code><provider store></code>组件；（更多说明请参考 [react-redux 的 api][1]）
传入 connect 的 mapstatetoprops方法 ，正如其名，是将 redux 的状态 映射到 react组件的props属性。任何时候，**只要 redux store 发生改变，mapstatetoprops 函数就会被调用**。这里返回对象是 <code>{light:state}</code>，这样确保 redux 中的 state 发生改变时，组件的 props.light 都是最新的 redux state。
mapdispatchtoprops方法 则是将 store 中的 dispatch方法 直接封装成对象的一个属性，一般会用到 redux 的辅助函数 bindactioncreators()；这里将 <code>dispatch</code> 绑定到 <code>action</code>属性，这样在红绿灯组件内让其变成红灯的时候，不需要 <code>dispatch(changered())</code> 这么调用，直接使用 <code>actions.changered()</code>，语义化更好；（更多说明请参考 [react-redux 的 api][1]）
最后的 <code><provider store></code> 使组件层级中的 connect() 方法都能够获得 redux store，这里才真正注入<code>store</code>变量，之前的只是声明而已（之前的好比store是个形参，到了这一步store就是实参了）。（更多说明请参考 [react-redux 的 api][1]）
经过上面的语句，redux就将 state属性 、 （**store** 的） <code>dispatch方法</code> 与 r
eact 组件的 props 绑定在一起，凡是更改 redux 的 states，就会更新所连接组件的 <code>props</code> 属性。
react-redux 中的 connect 方法就算是hoc（high order component，高阶组件）了，具体原理可参考文章 初识react中的high order component，这是因为如果使用es6 写react组件的话，mixin是不支持的 ，因此使用high order component代替；
理解了最为困难的部分，之后的事情就水到渠成了；
现在，只要记住 在app中可以直接使用redux中的一切了 就行了
我们回过头来，完善 <code>app</code> 组件的代码，完善 autochange方法：
至此已经完成本节示例，通过 <code>npm start</code> 开启服务， 在 http://localhost:3000/light/redux 中查看。
在这个示例里，通过点击红绿灯，每隔若干秒红绿灯就会变换颜色，这说明两者已经链接起来；
（这个是gif图，如果没动画请点击在新窗口打开）
在后一篇文章，将示例如何处理多个redux、react的情形；
[1] http://camsong.github.io/redux-in-chinese/docs/react-redux/api.html