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