首页 > 代码库 > redux知识点记录

redux知识点记录

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呢?应该有一个属性名字,

 

redux知识点记录