redux知识点记录

Posted 2020-09-23 飞哥100

1、connect的第一个参数mapStateToProps，返回store的分支数据，只要该分支数据变动，那么就会导致connect的这个组件重绘，从而导致视图改变，也就是说，每个组件只监听它所关联的部分 state。

2、connect的第二个参数mapDispatchToProps，如果没有传递，则默认情况下，dispatch 会注入到你的组件 props 中。

3、mapDispatchToProps可以是一个函数，也可以是一个对象：

1）当mapDispatchToProps是函数的时候，类似如下：

const mapDispatchToProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch({
        type: ‘SET_VISIBILITY_FILTER‘,
        filter: ownProps.filter
      });
    }
  };
}

作为函数，应该返回一个对象，该对象的每个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。

2）当mapDispatchToProps是对象的时候，类似如下：

const mapDispatchToProps = {
  onClick: Action Creator函数;
}
例如：
const mapDispatchToProps = {
  onClick: (data) => {
    type: ‘SET_VISIBILITY_FILTER‘,
    info: data
  };
}

它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由 Redux 自动dispatch发出，也就是说，connect函数内部会将Action creator转变为dispatch(Action creator)函数，变成跟1）一样的函数。

那么组件如何拿到这个prop呢？应该有一个属性名字，