dispatch 不是一个函数 - Redux答案

【问题标题】：dispatch is not a function - Reduxdispatch 不是一个函数 - Redux
【发布时间】：2021-09-18 13:04:52
【问题描述】：

我正在练习使用 react 和 redux 的电子商务应用程序。在处理它时，我遇到了一个错误，控制台说“调度不是函数”。尽管 redux-thunk 在其他动作创建者中运行良好。但在下面的操作中，我收到了这个错误。

这是来自 product.jsx

的代码

const Product = ({ item }) => {
  return (
    <Container>
      <Circle />
      <Image src={item.img} />
      <Info>
        <Icon>
// ----------Here is the Event handler -------------
           
          <ShoppingCartOutlined onClick={addToCart(item)}/>

// ------------------ end ----------------
        </Icon>
        <Icon>
          <SearchOutlined />
        </Icon>
        <Icon>
          <FavoriteBorderOutlined />
        </Icon>
      </Info>
    </Container>
  );
};

export default Product;

这是来自动作创建者的代码 cart.js

import { ADD_TO_CART } from "../constatns/actionConstants";


export const addToCart = item => dispatch =>{

    try {
        
        const cartItems = [];
        let alreadyInCart = false;
    
        cartItems.forEach(cartItem => {
            if(cartItem.id === item.id){
                alreadyInCart = true;
                cartItem.count++
            }
        })
        if(!alreadyInCart){
            cartItems.push({...item, count: 1})
        }
    
        dispatch({type: ADD_TO_CART, payload: cartItems})
    } catch (error) {
        console.log(error)
    }


}

这是购物车减速器

import {ADD_TO_CART} from "../constatns/actionConstants";

const cart = (state = {cartItems: []}, action) => {

    if(action.type === ADD_TO_CART) {

        return {...state, cartItems: action.payload}
    }else {

        return state
    }
}
export default cart

此外，还请详细说明使用<Icon onClick={() => addToCart(item)} /> and <Icon onClick={addToCart(item)} /> 之间的区别。我有时会感到困惑。还有我什么时候应该使用这两种情况。

非常期待，谢谢:)

【问题讨论】：

如何导入dispatch？
为什么需要导入dispatch？如果我没记错的话，它应该与 redux 商店一起提供。此外，在其他文件中，无需任何导入即可正常工作。

标签： javascript reactjs redux

【解决方案1】：

让我们快速总结一下您的应用中应该发生的事情。

你调度一个动作。
那个动作可以是一个直接进入reducer的对象。
或者它可以是一个函数定义，去 redux-thunk。
redux thunk 将 dispatch 函数作为参数，并调用它。

所以，使用 Redux-thunk 并使用函数作为操作（如 addToCart），您还需要调度这些操作，所以，

          <ShoppingCartOutlined onClick={()=>dispatch(addToCart(item))}/>

dispatch 可以通过以下两种方式定义：

1.使用 react-redux 包中的 useDispatch 钩子。

2.使用mapDispatchToProps函数。

onClick prop 应该是一个函数定义，每当点击事件发生时，react 都会调用该函数。

onClick={addToCart(item)} ,

addToCart(item) 返回此函数定义：

    dispatch =>{

    try {
        
        const cartItems = [];
        let alreadyInCart = false;
    
        cartItems.forEach(cartItem => {
            if(cartItem.id === item.id){
                alreadyInCart = true;
                cartItem.count++
            }
        })
        if(!alreadyInCart){
            cartItems.push({...item, count: 1})
        }
    
        dispatch({type: ADD_TO_CART, payload: cartItems})
    } catch (error) {
        console.log(error)
    }


}

而且这个定义会被react调用，但是是错误的。因为这个定义应该被 redux-thunk 接收。

onClick={() => addToCart(item)}

现在点击后react调用的函数定义为() => addToCart(item)。由于我上面解释的原因，仍然是错误的。

【讨论】：