黄qiong

2017-12-26 23:39

mapStateToProps,mapDispatchToProps的使用姿势

本文作者:IMWeb 黄qiong 原文出处:IMWeb社区 未经同意,禁止转载

前言

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

mapStateToProps(state, ownProps)

  1. mapStateToProps是一个函数,用于建立组件跟storestate的映射关系
  2. 作为一个函数,它可以传入两个参数,结果一定要返回一个object
  3. 传入mapStateToProps之后,会订阅store的状态改变,在每次storestate发生变化的时候,都会被调用
  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
  }
}

mapDispatchToProps

  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 的存在,我们需要将increasedecrease 两个函数包装一下,使之成为直接可被调用的函数(即,调用该方法就会触发 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
}
  1. 不传的时候,React-Redux会自动将dispatch注入组件的props。

参考

1条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。