redux中的一個問題，求教

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函數(shù)的調用我理解了。getAllProducts()的執(zhí)行結果雖然是個函數(shù)，但因為有引用的redux-thunk，所以store.dispatch()的參數(shù)可以是getAllProducts()所生成的函數(shù)。

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

但是對于addToCart 函數(shù)的調用，我不太理解

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是在點擊事件的處理函數(shù)中，addToCart(product.id)的執(zhí)行結果是個函數(shù)。但和getAllProducts不同，這個生成的函數(shù)并不是store.dispatch()的參數(shù)，那么這個函數(shù)是如何執(zhí)行的呢?

回答

編輯回答

單眼皮

好問題，哈哈，因為我也沒看懂，專門去查了下React-Redux源碼
然后我們再看下官方范例的代碼中，最后的代碼：

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

mapDispatchToProps方法有三種可能：

方法。這個不用解釋，都看的懂
undefined。這個也不用解釋，組件內會獲得dispatch方法，交給組件內自己分發(fā)action。
對象。也就是我們遇到的場景，這個源碼中有特殊處理，把對象轉換成方案1了。

解釋完畢

2018年7月31日 10:49

編輯回答

蔚藍色

我好像想錯了，稍等我查查，答案先別看了

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

addToChart接受productId，返回一個函數(shù)，因此JSX中的回調函數(shù)就變成了

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>
)

即點擊事件的回調函數(shù)仍然會觸發(fā)diaptch

2017年5月31日 01:13