美文网首页
Redux中的connect方法

Redux中的connect方法

作者: stutterr | 来源:发表于2018-12-03 16:25 被阅读14次

connect 方法

connect 方法具体的作用是将store和组件联系在一起,api文档中有这样的一句话:

It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.

connect 并不会改变它“连接”的组件,而是提供一个经过包裹的 connect 组件。 conenct 接受4个参数,分别是 mapStateToPropsmapDispatchToPropsmergePropsoptions

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
  • [mapStateToProps(state, [ownProps]): stateProps] (Function)
    改方法允许我们将store中的数据作为props绑定到组件中,只要store发生了bianh就会调用mapStateToProps方法,mapStateToProps返回的结果必须是一个纯对象,这个对象会与组件的 props 合并,例子:
state => ({
  count: state.counter.count
})

// or
const mapStateToProps = (state) => {
  return ({
    count: state.counter.count
  })}
  • [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)
    允许我们将 action 作为 props 绑定到组件中,
    如果传递的是一个对象,那么每个定义在该对象的函数都将被当作 Redux action creator,对象所定义的方法名将作为属性名;每个方法将返回一个新的函数,函数中 dispatch 方法会将 action creator 的返回值作为参数执行。这些属性会被合并到组件的 props 中。

实际上 mapDispatchToProps 就是用于建立组件跟store.dispatch的映射关系,可以是一个object,也可以传入函数
如果 mapDispatchToProps 是一个函数,它可以传入dispatch,ownProps, 定义UI组件如何发出 action,实际上就是要调用 dispatch 这个方法

dispatch => ({
  login: (...args) => dispatch(loginAction.login(..args)),
})

// or
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increase: (...args) => dispatch(actions.increase(...args)),
    decrease: (...args) => dispatch(actions.decrease(...args))
  }
}
  • [mergeProps(stateProps, dispatchProps, ownProps): props] (Function)
    如果指定了这个参数,mapStateToProps()mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。你也许可以用这个回调函数,根据组件的 props筛选部分的 state 数据,或者把 props 中的某个特定变量与 action creator 绑定在一起。如果你省略这个参数,默认情况下返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的结果。

  • [options] (Object)
    如果指定这个参数,可以定制 connector 的行为。

主要需要理解前两个方法。

参考文档

Redux中文Connect

相关文章

网友评论

      本文标题:Redux中的connect方法

      本文链接:https://www.haomeiwen.com/subject/rdwycqtx.html