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呢?应该有一个属性名字,
时间: 2024-11-05 19:26:20