各位老铁们好，相信很多人对React体验：reactredux中connect详解都不是特别的了解，因此呢，今天就来为大家分享下关于React体验：reactredux中connect详解以及的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！
React-Redux 提供了两个重要的对象，Provider 和connect。前者使React组件可连接（connectable），后者真正将React组件连接到Redux存储。在react-redux的文档中，connect的描述是一段晦涩的英文。刚开始学习redux的时候，我看了这个文档很久，但没有理解全部意思（可能是没理解这个词）。我认识它们，但我觉得我不明白它们组合起来意味着什么）。
初步知识
首先我们回顾一下redux的基本用法。如果您还没有阅读redux 文档，那么您一定应该先阅读它。
const reducer=(state={count: 0}, action)={ switch (action.type){ case 'INCREASE': return {count: state.count + 1}; case 'DECREASE': return {count: state.count - 1 }；默认：返回状态； }}const actions={increase:（）=（{type:'INCREASE'}），decrease:（）=（{type:'DECREASE'}）}const store=createStore（reducer）;store.subscribe（（）=console.log (store.getState()));store.dispatch(actions.increase()) //{count: 1}store.dispatch(actions.increase()) //{count: 2}store.dispatch (actions.increase() ) //{count: 3} 通过reducer创建一个store。每当我们在商店上发送一个操作时，商店中的数据就会相应地改变。
当然我们可以直接在React中使用Redux：在最外层容器组件中初始化store，然后将state上的属性作为props传递。
class App extends Component{ componentWillMount(){ store.subscribe((state)=this.setState(state)) } render(){ return Comp state={this.state} onIncrease={()=store.dispatch(actions. raise())} onDecrease={()=store.dispatch(actions.decrease())}/}} 但这不是最好的方法。最好的方法是使用react-redux提供的Provider和connect方法。
使用react-redux
首先，将Provider组件中的所有内容包装在最外层的容器中，并将之前创建的store作为prop传递给Provider。
const App=()={ return ( Provider store={store} Comp //Provider )};如果Provider中的任何一个组件（比如这里的Comp）需要使用state中的数据，那么它必须是“已连接”的。“组件——”使用connect方法来包装“你写的组件（MyComp）”。
class MyComp extends Component { //内容.}const Comp=connect(.args)(MyComp);可见connect方法是重中之重。
连接详细解释
让我们看看connect 方法到底做了什么。
首先看一下函数的签名：
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [选项])
connect()接收四个参数，分别是mapStateToProps、mapDispatchToProps、mergeProps和options。
mapStateToProps（状态，ownProps）: stateProps
这个函数允许我们将数据从store 绑定到组件作为props。
const mapStateToProps=(state)={ return { count: state.count }} 该函数的第一个参数是Redux 存储，我们从中提取了count 属性。因为返回的是具有count 属性的对象，所以MyComp 将有一个名为count 的props 字段。
class MyComp extends Component { render(){ return div count: {this.props.count} times/div }}const Comp=connect(.args)(MyComp);当然，你不必原封不动地保留状态中的数据，通过动态传入组件，你可以根据状态中的数据动态输出组件所需的（最小）属性。
const mapStateToProps=(state)={ return { GreaterThanFive: state.count 5 }} 函数的第二个参数ownProps 是MyComp 自己的props。有时，ownProps也会影响它。例如，当您维护商店中的用户列表时，您的组件MyComp 只关心一个用户（由props 中的userId 反映）。
const mapStateToProps=(state, ownProps)={ //状态为{userList: [{id: 0, name: '王二'}]} return { user: _.find(state.userList, {id: ownProps.userId}) }}class MyComp 扩展Component { static PropTypes={ userId: PropTypes.string.isRequired, user: PropTypes.object }; render(){ return div 用户名： {this.props.user.name}/div }}const Comp=connect(mapStateToProps) (MyComp);当state改变或者ownProps改变时，会调用mapStateToProps计算一个新的stateProps并更新到MyComp（与ownProps合并后）。
这基本上就是将数据从Redux 存储连接到组件的方式。
mapDispatchToProps(dispatch, ownProps):dispatchProps
connect的第二个参数是mapDispatchToProps，它的作用是将action作为props绑定到MyComp。
const mapDispatchToProps=(dispatch, ownProps)={ return { 增加： (.args)=调度(actions.increase(.args)), 减少： (.args)=调度(actions.decrease(. args)) }}class MyComp extends Component { render(){ const {count,increase,decrease}=this.props; return (div div 计数： {this.props.count} 次/div 按钮onClick={increase} 增加/button 按钮onClick={decrease}reduce/button /div) }}const Comp=connect(mapStateToProps, mapDispatchToProps)(MyComp ）；由于mapDispatchToProps方法返回一个具有increase属性和decrease属性的对象，因此这两个属性也将成为MyComp props。
如上所示，调用actions.increase()只能得到一个action对象{type:'INCREASE'}。要触发此操作，必须在商店上调用调度方法。 diapatch 正是mapDispatchToProps 的第一个参数。不过，为了不让MyComp组件感知到dispatch的存在，我们需要对increase函数进行包装，使其成为可直接调用的函数（即调用该方法会触发dispatch）。
Redux本身提供了bindActionCreators函数来将action包装成直接可调用的函数。
import {bindActionCreators} from 'redux';const mapDispatchToProps=(dispatch, ownProps)={ return bindActionCreators({increase: action.increase,decrease: action.decrease });}同样，当ownProps发生变化时也会调用该函数。生成一个新的dispatchProps（与statePrope和ownProps合并后）并将其更新为MyComp。注意，action的改变不会引起上述过程。默认操作在组件的生命周期内是固定的。
[mergeProps(stateProps,dispatchProps,ownProps): 道具]
如前所述，stateProps 和dispatchProps 都需要先与ownProps 合并，然后再分配给MyComp。 connect 的第三个参数用于执行此操作。通常情况下，您不需要传递此参数，connect 将使用Object.assign 代替。
其他
（超过）
附：connect方法官方英文文档
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [选项])
将React 组件连接到Redux 存储。
它不会修改传递给它的组件类。相反，它返回一个新的连接组件类，供您使用。
论据
[mapStateToProps(state, [ownProps]): stateProps] (Function): 如果指定，组件将订阅Redux 存储更新。任何时候更新，mapStateToProps 都会被调用。它的结果必须是一个普通对象*，并且它将被合并到组件的props 中。如果省略它，该组件将不会订阅Redux 存储。如果ownProps 被指定为第二个参数，它的值将是传递给组件的props，并且每当组件接收到新的props 时，mapStateToProps 都会被另外重新调用（例如，如果从父组件接收到的props 发生了浅层更改，并且您使用ownProps 参数，mapStateToProps 被重新评估）。
[mapDispatchToProps(dispatch, [ownProps]):dispatchProps] (对象或函数): 如果传递一个对象，则其中的每个函数将被假定为Redux 操作创建者。具有相同函数名称的对象，但每个操作创建者都包装在调度调用中，以便可以直接调用它们，将被合并到组件的props 中。如果传递了一个函数，它将被调度。您可以返回一个对象，该对象以某种方式使用分派以您自己的方式绑定操作创建者。 （提示：您可以使用Redux 中的bindActionCreators() 帮助器。）如果您省略它，默认实现只会将调度注入组件的props 中。如果将ownProps 指定为第二个参数，则其值将是传递给组件的props，并且每当组件收到新的props 时，都会重新调用mapDispatchToProps。
[mergeProps(stateProps,dispatchProps,ownProps): props] (Function): 如果指定，则传递mapStateToProps()、mapDispatchToProps() 和父props 的结果。从它返回的普通对象将作为props 传递给包装的组件。您可以指定此函数来根据props 选择状态的一部分，或者将动作创建者绑定到props 中的特定变量。如果省略它，则默认使用Object.assign({}, ownProps, stateProps,dispatchProps )。
[选项]（对象）如果指定，则进一步自定义连接器的行为。
[pure=true] (Boolean): 如果为true，则实现shouldComponentUpdate 并浅层比较mergeProps 的结果，防止不必要的更新，假设组件是“纯”组件，并且不依赖于除其props 之外的任何输入或状态，所选Redux 存储的状态。默认为true。
用户评论
终于找到一个解释 Connect 最好的文章了！之前一直对它功能感到迷茫，这篇博文讲解清晰，用示例也很到位，让我彻底明白了它的用法, 特别是关于 `mapDispatchToProps` 和 `mapStateToProps` 的解释非常 hilfreich!
有9位网友表示赞同！
学习 React 过程中真的遇到过一堆类似问题， Connect 让人头疼啊！这篇文章很良心，逻辑清晰易懂，推荐给所有和我一样卡在这个阶段的同学!
有20位网友表示赞同！
这个连接 Redux 在 React 中的用法确实很重要，以前我总是觉得代码过于复杂难以理解。 这篇文章把理论和实际应用很好地结合在一起，帮助我真正掌握了 Connect 的精髓！
有15位网友表示赞同！
我觉得 Connect 的概念还是好的，尤其是用来管理状态共享，提高组件可维护性。不过有些代码示例有点长，可能对于初学者来说不太容易吸收。
有13位网友表示赞同！
React 的学习路确实很長... 之前对这个 `connect` 没太懂，以为它就是一个简单的 bridge ，没想到这么有讲究。这篇博文让我明白了 Connect 只是桥梁，而真正的核心是状态管理和数据流的处理！
有6位网友表示赞同！
对于 React 中的 Redux 部分我一直感到困惑，这篇文章终于给我解释清楚了！特别是关于 `dispatch` 和 `action` 的使用方式，简直太棒了！
有7位网友表示赞同！
这个博客的重点在于代码示例，虽然很详细地讲解了 Connect 的用法，但是如果能添加更多的场景和应用案例，会更实用更有意义!
有20位网友表示赞同！
ReactRedux connect 真是个宝藏工具啊！以前没接触过，看这篇文章感觉一下子豁然开朗。
有11位网友表示赞同！
我一直想学习一下 state 管理的方案，这篇博文讲解得很仔细，让我对 React 与 Redux 的整合有了更深的理解。感谢作者分享！
有9位网友表示赞同！
虽然博客写得很好，但是我认为对于初学者来说，建议在讲解概念之前先解释一下 Redux 的基本原理，这样会更容易理解 Connect 的作用和用途。
有9位网友表示赞同！
我觉得这个博客的评论区太少了，这篇文章很有价值，应该吸引更多人来学习！
有9位网友表示赞同！
ReactRedux connect 虽然很重要，但我更喜欢其他状态管理方案，比如 Zustand 或 MobX。这篇博文只描述了一种实现方式，建议作者也能分享一下其他方案的优缺点！
有9位网友表示赞同！
这篇文章讲解得太好了，让我终于明白 Connect 是如何将 Redux 与 React 结合在一起的！接下来我要好好练习一下，巩固我的理解。
有15位网友表示赞同！
我之前是用 Vue 开发应用的，最近才开始学习 React。这篇博客对我来说非常有用！它帮助我快速了解了 ReactRedux 的 connect 函数。
有20位网友表示赞同！
这个 `react-redux` 包真的太复杂了，感觉整个生态都让人头疼。 期待作者能提供一些更简单的替代方案，让React 开发更容易入门！
有11位网友表示赞同！
这篇文章内容很实用，非常详细地讲解了 Connect 的各项功能。特别是它对不同场景的应用示例，让我受益匪浅!
有8位网友表示赞同！