redux 是「react 全家桶」中极为重要的一员，它试图为 react 应用提供「可预测化的状态管理」机制。redux 本身足够简单，除了 react，它还能够支持其他界面框架。所以如果要将 redux 和 react 结合起来使用，就还需要一些额外的工具，其中最重要的莫过于 react-redux 了。
react-redux 提供了两个重要的对象，<code>provider</code> 和 <code>connect</code>，前者使 react 组件可被连接（connectable），后者把 react 组件和 redux 的 store 真正连接起来。react-redux 的文档中，对 <code>connect</code> 的描述是一段晦涩难懂的英文，在初学 redux 的时候，我对着这段文档阅读了很久，都没有全部弄明白其中的意思（大概就是，单词我都认识，连起来啥意思就不明白了的感觉吧）。
通过 <code>reducer</code> 创建一个 <code>store</code>，每当我们在 <code>store</code> 上 <code>dispatch</code> 一个 <code>action</code>，<code>store</code> 内的数据就会相应地发生变化。
我们当然可以直接在 react 中使用 redux：在最外层容器组件中初始化 <code>store</code>，然后将<code>state</code> 上的属性作为 <code>props</code> 层层传递下去。
但这并不是最佳的方式。最佳的方式是使用 react-redux 提供的 <code>provider</code> 和 <code>connect</code> 方法。
首先在最外层容器中，把所有内容包裹在 <code>provider</code> 组件中，将之前创建的 <code>store</code> 作为<code>prop</code> 传给 <code>provider</code>。
<code>provider</code> 内的任何一个组件（比如这里的 <code>comp</code>），如果需要使用 <code>state</code> 中的数据，就必须是「被 connect 过的」组件——使用 <code>connect</code> 方法对「你编写的组件（<code>mycomp</code>）」进行包装后的产物。
可见，<code>connect</code> 方法是重中之重。
究竟 <code>connect</code> 方法到底做了什么，我们来一探究竟。
首先看下函数的签名：
connect([mapstatetoprops], [mapdispatchtoprops], [mergeprops], [options])
<code>connect()</code> 接收四个参数，它们分别是 <code>mapstatetoprops</code>，<code>mapdispatchtoprops</code>，<code>mergeprops</code>和<code>options</code>。
这个函数允许我们将 <code>store</code> 中的数据作为 <code>props</code> 绑定到组件上。
这个函数的第一个参数就是 redux 的 <code>store</code>，我们从中摘取了 <code>count</code> 属性。因为返回了具有 <code>count</code> 属性的对象，所以 <code>mycomp</code> 会有名为 <code>count</code> 的 <code>props</code> 字段。
当然，你不必将 <code>state</code> 中的数据原封不动地传入组件，可以根据 <code>state</code> 中的数据，动态地输出组件需要的（最小）属性。
函数的第二个参数 <code>ownprops</code>，是 <code>mycomp</code> 自己的 <code>props</code>。有的时候，<code>ownprops</code> 也会对其产生影响。比如，当你在 <code>store</code> 中维护了一个用户列表，而你的组件 <code>mycomp</code> 只关心一个用户（通过 <code>props</code> 中的 <code>userid</code> 体现）。
当 <code>state</code> 变化，或者 <code>ownprops</code> 变化的时候，<code>mapstatetoprops</code> 都会被调用，计算出一个新的<code>stateprops</code>，（在与 <code>ownprops</code> merge 后）更新给 <code>mycomp</code>。
这就是将 redux <code>store</code> 中的数据连接到组件的基本方式。
<code>connect</code> 的第二个参数是 <code>mapdispatchtoprops</code>，它的功能是，将 action 作为 <code>props</code> 绑定到<code>mycomp</code> 上。
由于 <code>mapdispatchtoprops</code> 方法返回了具有 <code>increase</code> 属性和 <code>decrease</code> 属性的对象，这两个属性也会成为 <code>mycomp</code> 的 <code>props</code>。
如上所示，调用 <code>actions.increase()</code> 只能得到一个 <code>action</code> 对象 <code>{type:'increase'}</code>，要触发这个 <code>action</code> 必须在 <code>store</code> 上调用 <code>dispatch</code> 方法。<code>diapatch</code> 正是 <code>mapdispatchtoprops</code> 的第一个参数。但是，为了不让 <code>mycomp</code> 组件感知到 <code>dispatch</code> 的存在，我们需要将 <code>increase</code> 和<code>decrease</code> 两个函数包装一下，使之成为直接可被调用的函数（即，调用该方法就会触发<code>dispatch</code>）。
redux 本身提供了 <code>bindactioncreators</code> 函数，来将 action 包装成直接可被调用的函数。
同样，当 <code>ownprops</code> 变化的时候，该函数也会被调用，生成一个新的 <code>dispatchprops</code>，（在与<code>stateprope</code> 和 <code>ownprops</code> merge 后）更新给 <code>mycomp</code>。注意，<code>action</code> 的变化不会引起上述过程，默认 <code>action</code> 在组件的生命周期中是固定的。
之前说过，不管是 <code>stateprops</code> 还是 <code>dispatchprops</code>，都需要和 <code>ownprops</code> merge 之后才会被赋给 <code>mycomp</code>。<code>connect</code> 的第三个参数就是用来做这件事。通常情况下，你可以不传这个参数，<code>connect</code> 就会使用 <code>object.assign</code> 替代该方法。
最后还有一个 <code>options</code> 选项，比较简单，基本上也不大会用到（尤其是你遵循了其他的一些 react 的「最佳实践」的时候），本文就略过了。希望了解的同学可以直接看文档。
（完）