动作在Redux中没有定义

Question

我试图创建一个网络商店购物车组件的减速器，但我遇到了这个错误：

“操作”未定义

我的代码如下：

 import { CART_ADD_ITEM } from "../constants/cartConstants";
 import { addToCart } from '../actions/cartActions';
 export const cartReducer = (state = { cartItems: [], action }) => {
switch(action.type){
    case CART_ADD_ITEM:
        const item = action.payload;
        //we check if the item exists in state
        const existItem = state.cartItems.find(x => x.product === item.product);
        
        if(existItem){
            return {
                ...state,
                cartItems: state.cartItems.map(x => x.product === existItem.product ? item : x),
            }
        } else {
            return {
                ...state,
                cartItems : [...state.cartItems, item],
            }
        }
    default:
        return state;
}
 };

这就是cartActions的样子。似乎以前的代码必须以某种方式使用它，但是如何使用呢？从“axios”导入axios；从“…”导入{CART\u ADD\u ITEM}/常数/常数'；

导出常量addToCart=（id，数量）=

dispatch({
    type: CART_ADD_ITEM,
    payload: {
        product: data._id,
        name: data.name,
        image: data.image,
        price: data.price,
        countInStock: data.countInStock,
        quantity,
    }
});
//once dispatched, we wnt ot save an item to local storage added to cart to local storage
//we get it in store.js 
localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems));
 }

这有什么问题？

Answer 1

还原器以初始状态为第一个参数，动作为第二个参数。

改进了

let initialState = {cartItems: []}
export const cartReducer = (state = initialState, action) => {
switch(action.type){
    case CART_ADD_ITEM:
        //we check if the item exists in state
        const existItem = state.cartItems.find(x => x.product === action.payload.product);
        
        if(existItem){
            return {
                ...state,
                cartItems: state.cartItems.map(x => x.product === existItem.product ? action.payload : x),
            }
        } else {
            return {
                ...state,
                cartItems : [...state.cartItems, action.payload],
            }
        }
    default:
        return state;
}
 };

Answer 2

您的减少器期望一个操作作为第二个参数。现在，您的代码包含action作为默认状态下的属性，这是不正确的。减速机类型签名应该是这样的：

export const cartReducer = (state = { cartItems: [] }, action) => {
  // Reducer content here
}