const mapStateToProps = state => { return { count: state.count }; }; const mapDispatchToProps = dispatch => { return { dispatch }; }; export default connect(mapStateToProps, mapDispatchToProps)(Child); // 上述代码执行之后，可以看到connect函数里面的 <WrappedComponent {...this.props} {...mapStateToProps(this.context.store.getState())} {...mapDispatchToProps(this.context.store.dispatch)} /> // 就变成了 <WrappedComponent {...this.props} {count: store.getState().count} {dispatch: store.dispatch} /> // 这样，子组件Child的props里面就多了count和dispatch两个属性 // count可以用来渲染UI，dispatch可以用来触发回调
So，这样就OK了？OK了。 通过一个闭包生成一个数据中心store，然后把这个store绑定到React的顶层props里面，子组件通过HOC建立与顶层props.store的联系，进而获取数据、修改数据、更新UI。 这里主要讲了一下三者怎么窜在一起的，如果想了解更高级的功能，比如redux中间件、reducer拆分、connect的其他参数等，可以去看一下对应的源码。