mapStateToProps，mapDispatchToProps的使用姿式

本文做者：IMWeb 黄qiong 原文出处：IMWeb社区 未经赞成，禁止转载

前言
刚接触redux的时候，发现你们对mapDispatchToProps使用有几种方法，并且都跑通了，本文来介绍下，redux的mapStateToProps，mapDispatchToProps的一些使用小姿式。

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。
参考
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
https://www.tuicool.com/articles/MrmYN36

来源地址：https://www.f2ecoder.net/715.html