本文作者：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