19-mapDispatchToProps的第二个参数

Time: 20200130

关于返回函数和函数执行

import React from 'react'
import { connect } from 'react-redux'
import { buyCake, buyIceCream } from '../redux'

function ItemContainer(props) {
    return (
        <div>
            <h2>Item - {props.item}</h2>
            <button onClick={() => props.buyItem(1)}>Buy Item</button>
        </div>
    )
}

// 可以在这里将此组件自身的props加入到参数中来
// state是指store的状态，这个需要明确
// 这是想把store的状态的某些值映射到本组件的props上来
const mapStateToProps = (state, ownProps) => {
    const itemState = ownProps.cake 
            ? state.cake.numOfCakes 
            : state.iceCream.numOfIceCream
    return {
        item: itemState
    }
}

// 如果函数被调用，则返回的是结果，已经不是函数，需要再用箭头函数组装
const mapDispatchToProps = (dispatch, ownProps) => {
    const dispatchFunction = ownProps.cake 
            ? () => dispatch(buyCake(1)) 
            : () => dispatch(buyIceCream(1))
    return {
        buyItem: dispatchFunction
    }
}

// 连接后，在本组件就可以使用映射到此组件的props上的内容了
export default connect(mapStateToProps, 
    mapDispatchToProps)
(ItemContainer)

在onClick={xxx}中，xxx要给出的是函数名，如果是要执行函数，即带上括号，则不行。因为带上括号表示当下就执行此函数，返回的是结果。

在mapDispatchToProps函数中，dispatchFunction是需要返回的函数，如果：

const mapDispatchToProps = (dispatch, ownProps) => {
    const dispatchFunction = ownProps.cake 
            ? dispatch(buyCake(1)) 
            : dispatch(buyIceCream(1))
    return {
        buyItem: dispatchFunction
    }
}

这种，返回的键buyItem对应的不是个函数，而是函数执行的结果了。

所以需要用() => dispatch(buyXXX())重新组装为函数方可。

另外，在connect中，如果只有mapDispatchToProps，则第一个参数需要设置为null。

END.