对mapStateToProps 、mapDispatchToProps的研究
  TEZNKK3IfmPf 28天前 11 0

 mapStateToProps(state, ownProps)

  1. ​mapStateToProps​​​是一个函数,用于建立组件跟​​store​​​的​​state​​的映射关系
  2. 作为一个函数,它可以传入两个参数,结果一定要返回一个​​object​
  3. 传入​​mapStateToProps​​​之后,会订阅​​store​​​的状态改变,在每次​​store​​​的​​state​​发生变化的时候,都会被调用
  4. ​ownProps​​​代表组件本身的props,如果写了第二个参数​​ownProps​​​,那么当​​prop​​​发生变化的时候,​​mapStateToProps​​​也会被调用。例如,当​​props​​​接收到来自父组件一个小小的改动,那么你所使用的​​ownProps​​​ 参数,​​mapStateToProps​​ 都会被重新计算)。
  5. ​mapStateToProps​​可以不传,如果不传,组件不会监听store的变化,也就是说Store的更新不会引起UI的更新

example:

const mapStateToProps = (state) => {
return {
todoList: state.todoList
}
}

   传入了props的:

const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}
  1. ​mapDispatchToProps​​​用于建立组件跟​​store.dispatch​​的映射关系
  2. 可以是一个​​object​​,也可以传入函数
  3. 如果​​mapDispatchToProps​​​是一个函数,它可以传入​​dispatch​​​,​​ownProps​​​, 定义UI组件如何发出​​action​​​,实际上就是要调用​​dispatch​​这个方法
/* 假设actions是一个import进来的值为actionCreator的object */
action.increase = function (info) {
return {
{
type:'INCREASE',
info
}
}
}

const mapDispatchToProps = (dispatch, ownProps) => {
return {
increase: (...args) => dispatch(actions.increase(...args)),
decrease: (...args) => dispatch(actions.decrease(...args))
}
}

调用​​actions.increase()​​​只能得到一个 ​​action​​​对象​​{type:'INCREASE'}​​​ ,要触发这个 ​​action​​​必须在​​store​​​ 上调用 ​​dispatch​​​ 方法。 ​​diapatch​​​正是 ​​mapDispatchToProps​​​的第一个参数。但是,为了不让 组件感知到 dispatch 的存在,我们需要将​​increase​​​ 和 ​​decrease​​ 两个函数包装一下,使之成为直接可被调用的函数(即,调用该方法就会触发 dispatch )。

而前面介绍​​bindActionCreator​​​的时候介绍过,可以直接将​​action​​包装成可以被调用的函数。

所以借助​​bindActionCreator​​​, 上面的​​mapDispatchToProps​​可以变成

import {bindActionCreators} from 'redux';

const mapDispatchToProps = {
} = (dispatch, ownProps) => {
return bindActionCreators({
increase: action.increase,
decrease: action.decrease
}, dispatch);
}

/* 返回跟上面一样的object */
{
increase: (...args) => dispatch(action.increase(...args)),
decrease: (...args) => dispatch(action.decrease(...args)),
}
  1. 如果​​mapDispatchToProps​​​是一个函数, 并且传入​​ownProps​​​, 当组件获取新的​​props​​​的时候,​​mapDispatchToProps​​也会被调用.
  2. 传入一个​​object​​​,其中这个​​object​​​所对应的​​value​​​必须是​​actionCreator​​​,这样​​redux​​​里面会自动帮我们调用​​bindActionCreator​​,所以上面又可以变成
const mapDispatchToProps = {
...action
}

不传的时候,React-Redux会自动将dispatch注入组件的props。
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 28天前 0

暂无评论

TEZNKK3IfmPf