前言

刚接触redux的时候,发现大家对mapSispatchToProps使用有几种方法,而且都跑通了,本文介绍下redux的mapStateToProps,mapDispatchToProps的一些小姿势

mapStateToProps(state,ownProps)

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

ex:

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这个方法
// 假设action是一个import进来的值为actionCreator的object

action.increase=function(info){
  return{
    {
      type:'INCREASE',
      info
    }
  }
}

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

调用action.increase()只能得到一个action对象{type:'INCREASE'} , 但要出发这个action，必须在store上调用disPatch方法。dispatch正是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。