react-redux的connect函数

  1. 1. 概述
  2. 2. 函数说明
    1. 2.1 mapStateToProps
    2. 2.2 mapDispatchToProps
  3. 3. 示例
    1. 3.1 mapStateToProps定义
    2. 3.2 实例

react-redux的connect函数

1. 概述

connect方法将state和dispatch绑定到Connect组件的参数上,然后Connect组件将你当前的App组件封装起来,使得App组件可以通过props获取到父组件Connect传递的state和props。

2. 函数说明

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

2.1 mapStateToProps

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

2.2 mapDispatchToProps

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

3. 示例

3.1 mapStateToProps定义

  • 以下定义ownProps参数无效
function mapStateToProps(state) {
  console.log(state); // state
  console.log(arguments[1]); // undefined
}
const mapStateToProps = (state, ownProps = {}) => {
  console.log(state); // state
  console.log(ownProps); // undefined
}
  • 以下定义ownProps参数有效
const mapStateToProps = (state, ownProps) => {
  console.log(state); // state
  console.log(ownProps); // ownProps
}
function mapStateToProps() {
  console.log(arguments[0]); // state
  console.log(arguments[1]); // ownProps
}
const mapStateToProps = (...args) => {
  console.log(args[0]); // state
  console.log(args[1]); // ownProps
}

3.2 实例

const mapStateToProps = ({
  listProduct,
  loading,
}: {
  listProduct: StateType;
  loading: {
    models: { [key: string]: boolean };
  };
}) => {
  return {
    listProduct,
    loading: loading.models.listProduct,
  }
};

export default connect(
  mapStateToProps,
)(CardList);

说明:
mapStateToProps入参
其中{}:{}为指定类型解构
let {a,b}:{a:string,b:number}=o;
其中loading:{}为对象展开
其中models: { [key: string]: boolean }为对象键值类型声明

{
  listProduct,
  loading,
}: {
  listProduct: StateType;
  loading: {
    models: { [key: string]: boolean };
  };
}

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 wind.kaisa@gmail.com

💰

×

Help us with donation