对mapStateToProps 、mapDispatchToProps的研究

2020-04-26 10:57:46 阅读：263 来源： 互联网

标签：... mapDispatchToProps 研究 mapStateToProps dispatch increase action ownProps

mapStateToProps（state, ownProps）

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

example:

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

传入了props的：

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

mapDispatchToProps

mapDispatchToProps用于建立组件跟store.dispatch的映射关系
可以是一个object，也可以传入函数
如果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)),
}

如果mapDispatchToProps是一个函数, 并且传入ownProps, 当组件获取新的props的时候，mapDispatchToProps也会被调用.
传入一个object，其中这个object所对应的value必须是actionCreator，这样redux里面会自动帮我们调用bindActionCreator，所以上面又可以变成

const mapDispatchToProps = {
    ...action
}


不传的时候，React-Redux会自动将dispatch注入组件的props。

标签：...,mapDispatchToProps,研究,mapStateToProps,dispatch,increase,action,ownProps
来源： https://www.cnblogs.com/zhouyideboke/p/12777698.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

对mapStateToProps 、mapDispatchToProps的研究

mapDispatchToProps