鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ redux中的一個問題，求教

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ù)的調(diào)用我理解了。getAllProducts()的執(zhí)行結(jié)果雖然是個函數(shù)，但因?yàn)橛幸玫膔edux-thunk，所以store.dispatch()的參數(shù)可以是getAllProducts()所生成的函數(shù)。

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

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

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

回答
編輯回答
單眼皮

好問題，哈哈，因?yàn)槲乙矝]看懂，專門去查了下React-Redux源碼
然后我們再看下官方范例的代碼中，最后的代碼：

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

mapDispatchToProps方法有三種可能：

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

解釋完畢

2018年7月31日 10:49
編輯回答
蔚藍(lán)色

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

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

addToChart接受productId，返回一個函數(shù)，因此JSX中的回調(diào)函數(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>
)

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

2017年5月31日 01:13