React-Redux----connect方法

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

参数1、:mapStateToProps

作用:
1、把store中的某些state或其中的某些属性注入到当前组件中。
2、该参数是一个函数,接收Object类型的state,以及Object类型的ownProps。返回一个Object类型的新state。
3、state示例:{ userInfo , friends }
4、userInfo 和 friends是store中两个具体的state,这两个state是在各自对应的reducer中定义的。

function mapStateToProps({ loginFormData, intro, router, epassport }) {
  return { ...loginFormData,
    intro: intro.newUserIntro,
    loginType: router.param.loginType,
    hasEpassErr: epassport.epassportHeight.hasEpassErr,
    hasEpassErrWithCode: epassport.epassportHeight.hasEpassErrWithCode,
  };
}

mapStateToProps(state, [ownProps]): 如果定义该参数,组件将会监听 Redux store 的变化。任何时候,只要 Redux store 发生改变,mapStateToProps 函数就会被调用。
该回调函数必须返回一个 纯对象,这个对象会与组件的 props 合并。
如果你省略了这个参数,你的组件将不会监听 Redux store。
如果指定了该回调函数中的第二个参数 ownProps,则该参数的值为传递到 该组件 的 props,而且只要组件接收到新的 props,mapStateToProps 也会被调用(例如,当 props 接收到来自父组件一个小小的改动,那么你所使用的 ownProps 参数,mapStateToProps 都会被重新计算)。

参数2、:mapDispatchToProps

1、作用:把action与dispatch进行绑定,然后注入到组件中。
2、该参数为一个函数,它接受dispatch作为参数,这个参数会被Redux自动传递。
3、在该函数内部我们可以 借助Redux的bindActionCreators(actions,dispatch)函数进行action和dispatch的绑定,然后返回它。

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    login,
    setLoginFormData,
    hideLoginError,
    jumpTo,
    loginFail,
    ...epassportActions,
  }, dispatch);
}

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): 如果传递的是一个对象,那么每个定义在该对象的函数都将被当作 Redux action creator,对象所定义的方法名将作为属性名;每个方法将返回一个新的函数,函数中dispatch方法会将action creator的返回值作为参数执行。这些属性会被合并到组件的 props 中

详见:http://cn.redux.js.org/docs/react-redux/api.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容