javascript - 为什么 ReduxDevTools 不更新购物车操作？

Question

我正在使用 react-redux 构建一个电子商务应用程序，并且正在实施购物车操作。我对产品操作执行了相同的步骤，但购物车操作不会在 ReduxDevTools 上更新。你认为我还有什么可能遗漏的吗？”</p>

购物车操作：

   import Axios from 'axios';
import {CART_ADD_ITEM} from '../constants/cartConstants';

export const addToCart = (productId,qty) => async (dispatch,getState) =>{
    //generamos una Ajax request al backend con get para traer la info de un producto, await por que espera una respuesta.
    const {data} = await Axios.get(`api/products/${productId}`);
    dispatch({
        type: CART_ADD_ITEM,
        payload: {
            name: data.name,
            image: data.image,
            price: data.image,
            countInStock: data.countInStock,
            product: data._id,
            qty,


        },
    });
    
    localStorage.setItem('cartItems', JSON.stringify(getState().cart.cartItems));
}; 

购物车常量：

export const CART_ADD_ITEM = 'CART_ADD_ITEM';

推车减速机：

   import {CART_ADD_ITEM } from '../constants/cartConstants';


export const cartReducer = (state = { cartItems: [] }, action) => {
    switch (action.type) {
        case CART_ADD_ITEM:
            const item = action.payload;
            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;
            }
          };

店铺：

    import { applyMiddleware, createStore, compose, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import {cartReducer} from './reducers/cartReducers';
import {productDetailsReducer, productListReducer} from './reducers/productReducers';

const initialState = {
    cart: {
      cartItems: localStorage.getItem('cartItems')
        ? JSON.parse(localStorage.getItem('cartItems'))
        : [],
    },
  };
const reducer = combineReducers({
    productList: productListReducer,
    productDetails: productDetailsReducer,
    cart: cartReducer,
});
const composeEnhancer = (typeof window !=='undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__)|| compose;
const store = createStore(
    reducer,
     initialState, 
     composeEnhancer(applyMiddleware(thunk)));

export default store;

最后，我在 ReduxDevTools 中得到了这个结果：

当我尝试“AddToCart”时，ReduxDevTools 结果

谢谢你。

标签： javascriptreactjsmongodbreact-reduxstore