connect
Redux 是「React 全家桶」中极为重要的一员，它试图为 React 应用提供「可预测化的状态管理」机制。Redux 本身足够简单，除了 React，它还能够支持其他界面框架。所以如果要将 Redux 和 React 结合起来使用，就还需要一些额外的工具，其中最重要的莫过于 react-redux 了。
react-redux 提供了两个重要的对象， 和 ，前者使 React 组件可被连接（connectable），后者把 React 组件和 Redux 的 store 真正连接起来。react-redux 的文档中，对 的描述是一段晦涩难懂的英文，在初学 redux 的时候，我对着这段文档阅读了很久，都没有全部弄明白其中的意思（大概就是，单词我都认识，连起来啥意思就不明白了的感觉吧）。
在使用了一段时间 redux 后，本文尝试再次回到这里，给这段文档（同时摘抄在附录中）一个靠谱的解读。
预备知识
首先回顾一下 redux 的基本用法。如果你还没有阅读过 redux 的文档，你一定要先去阅读一下。
通过 创建一个 ，每当我们在 上 一个 ， 内的数据就会相应地发生变化。
我们当然可以直接在 React 中使用 Redux：在最外层容器组件中初始化 ，然后将 上的属性作为 层层传递下去。
但这并不是最佳的方式。最佳的方式是使用 react-redux 提供的 和 方法。
使用 react-redux
首先在最外层容器中，把所有内容包裹在 组件中，将之前创建的 作为 传给 。
内的任何一个组件（比如这里的 ），如果需要使用 中的数据，就必须是「被 connect 过的」组件——使用 方法对「你编写的组件（）」进行包装后的产物。
可见， 方法是重中之重。
详解
究竟 方法到底做了什么，我们来一探究竟。
首先看下函数的签名：
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
接收四个参数，它们分别是 ，，和。
这个函数允许我们将 中的数据作为 绑定到组件上。
这个函数的第一个参数就是 Redux 的 ，我们从中摘取了 属性。因为返回了具有 属性的对象，所以 会有名为 的 字段。
当然，你不必将 中的数据原封不动地传入组件，可以根据 中的数据，动态地输出组件需要的（最小）属性。
函数的第二个参数 ，是 自己的 。有的时候， 也会对其产生影响。比如，当你在 中维护了一个用户列表，而你的组件 只关心一个用户（通过 中的 体现）。
当 变化，或者 变化的时候， 都会被调用，计算出一个新的，（在与 merge 后）更新给 。
这就是将 Redux 中的数据连接到组件的基本方式。
的第二个参数是 ，它的功能是，将 action 作为 绑定到 上。
由于 方法返回了具有 属性和 属性的对象，这两个属性也会成为 的 。
如上所示，调用 只能得到一个 对象 ，要触发这个 必须在 上调用 方法。 正是 的第一个参数。但是，为了不让 组件感知到 的存在，我们需要将 和 两个函数包装一下，使之成为直接可被调用的函数（即，调用该方法就会触发）。
Redux 本身提供了 函数，来将 action 包装成直接可被调用的函数。
同样，当 变化的时候，该函数也会被调用，生成一个新的 ，（在与 和 merge 后）更新给 。注意， 的变化不会引起上述过程，默认 在组件的生命周期中是固定的。
之前说过，不管是 还是 ，都需要和 merge 之后才会被赋给 。 的第三个参数就是用来做这件事。通常情况下，你可以不传这个参数， 就会使用 替代该方法。
其他
最后还有一个 选项，比较简单，基本上也不大会用到（尤其是你遵循了其他的一些 React 的「最佳实践」的时候），本文就略过了。希望了解的同学可以直接看文档。
（完）
附：connect 方法的官方英文文档
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
Connects a React component to a Redux store.
It does not modify the component class passed to it. Instead, it returns a new, connected component class, for you to use.
Arguments
[mapStateToProps(state, [ownProps]): stateProps] (Function): If specified, the component will subscribe to Redux store updates. Any time it updates, mapStateToProps will be called. Its result must be a plain object*, and it will be merged into the component’s props. If you omit it, the component will not be subscribed to the Redux store. If ownProps is specified as a second argument, its value will be the props passed to your component, and mapStateToProps will be additionally re-invoked whenever the component receives new props (e.g. if props received from a parent component have shallowly changed, and you use the ownProps argument, mapStateToProps is re-evaluated).
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): If an object is passed, each function inside it will be assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props. If a function is passed, it will be given dispatch. It’s up to you to return an object that somehow uses dispatch to bind action creators in your own way. (Tip: you may use the bindActionCreators() helper from Redux.) If you omit it, the default implementation just injects dispatch into your component’s props. If ownProps is specified as a second argument, its value will be the props passed to your component, and mapDispatchToProps will be re-invoked whenever the component receives new props.
[mergeProps(stateProps, dispatchProps, ownProps): props] (Function): If specified, it is passed the result of mapStateToProps(), mapDispatchToProps(), and the parent props. The plain object you return from it will be passed as props to the wrapped component. You may specify this function to select a slice of the state based on props, or to bind action creators to a particular variable from props. If you omit it, Object.assign({}, ownProps, stateProps, dispatchProps) is used by default.
[options] (Object) If specified, further customizes the behavior of the connector.
[pure = true] (Boolean): If true, implements shouldComponentUpdate and shallowly compares the result of mergeProps, preventing unnecessary updates, assuming that the component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. Defaults to true.
[withRef = false] (Boolean): If true, stores a ref to the wrapped component instance and makes it available via getWrappedInstance() method. Defaults to false.
更多深度技术内容，请关注云栖社区微信公众号：yunqiinsight。