redux中的一个问题，求教

Question

Redux官方案例shopping cart中，src/actions/index.js文件

export const getAllProducts = () => dispatch => {
    shop.getProducts(products => {
        dispatch(receiveProducts(products))
    })
}
export const addToCart = productId => (dispatch, getState) => {
    if (getState().products.byId[productId].inventory > 0) {
        dispatch(addToCartUnsafe(productId))
    }
}

对于getAllProducts函数的调用我理解了。getAllProducts()的执行结果虽然是个函数，但因为有引用的redux-thunk，所以store.dispatch()的参数可以是getAllProducts()所生成的函数。

//src/index.js
import thunk from 'redux-thunk'
import { getAllProducts } from './actions'
store.dispatch(getAllProducts())

但是对于addToCart 函数的调用，我不太理解

import { addToCart } from '../actions'
const ProductsContainer = ({ products, addToCart }) => (
  <ProductsList title="Products">
    {products.map(product =>
      <ProductItem
        key={product.id}
        product={product}
        onAddToCartClicked={() => addToCart(product.id)} />
    )}
  </ProductsList>
)

addToCart是在点击事件的处理函数中，addToCart(product.id)的执行结果是个函数。但和getAllProducts不同，这个生成的函数并不是store.dispatch()的参数，那么这个函数是如何执行的呢?

Answer 1

好问题，哈哈，因为我也没看懂，专门去查了下React-Redux源码
然后我们再看下官方范例的代码中，最后的代码：

export default connect(
  mapStateToProps,
  { addToCart }
)(ProductsContainer)

mapDispatchToProps方法有三种可能：

1. 方法。这个不用解释，都看的懂
2. undefined。这个也不用解释，组件内会获得dispatch方法，交给组件内自己分发action。
3. 对象。也就是我们遇到的场景，这个源码中有特殊处理，把对象转换成方案1了。

解释完毕

Answer 2

我好像想错了，稍等我查查，答案先别看了

======================================

addToChart接受productId，返回一个函数，因此JSX中的回调函数就变成了

const ProductsContainer = ({ products, addToCart }) => (
  <ProductsList title="Products">
    {products.map(product =>
      <ProductItem
        key={product.id}
        product={product}
        onAddToCartClicked={
            (dispatch, getState) => {
                if (getState().products.byId[productId].inventory > 0) {
                    dispatch(addToCartUnsafe(productId))
                }} 
        />
    )}
  </ProductsList>
)

即点击事件的回调函数仍然会触发diaptch