Состояние не отображается в хранилище Redux, а действие не выполняется

Я пытаюсь следовать учебнику по Python/Django и дошел до части, связанной с Redux, и я вроде как застрял.

По сути, мне нужно иметь возможность добавлять товары в корзину, но состояние корзины, похоже, не "создается", если это правильный термин для использования, и без нормального состояния я предполагаю, что действия также не будут работать.

Вот как выглядит редуктор в настоящее время:

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;
  }
};

Я думаю, что проблема здесь может быть в том, что existItem возвращается как undefined.

import axios from "axios";
import { CART_ADD_ITEM } from "../constants/cartConstants";

export const addToCart = (id, qty) => async (dispatch, getState) => {
  const { data } = await axios.get(`/api/products/${id}`);

  dispatch({
    type: CART_ADD_ITEM,
    payload: {
      product: data._id,
      name: data.name,
      image: data.image,
      price: data.price,
      countInStock: data.countInStock,
      qty,
    },
  });

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

Вот как выглядит действие на данный момент.

И напоследок вот как выглядит файл store.js.

import { combineReducers, applyMiddleware } from "redux";
import { configureStore } from "@reduxjs/toolkit";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import {
  productListReducer,
  productDetailsReducer,
} from "./reducers/productReducers";
import { cartReducer } from "./reducers/cartReducers";
const reducer = combineReducers({
  productList: productListReducer,
  productDetails: productDetailsReducer,
  cart: cartReducer,
});

const cartItemsFromStorage = localStorage.getItem("cartItems")
  ? JSON.parse(localStorage.getItem("cartItems"))
  : [];
const initialState = {
  cart: { cartItems: cartItemsFromStorage },
};

const middleware = [thunk];

const store = configureStore(
  { reducer: reducer },
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

Два других редуктора работают отлично, я вижу выполняемые действия в Redux DevTools, страницы загружаются как нужно, но этот последний вообще не отображается в магазине

Я впервые работаю с Redux и React, поэтому я не знаю, как отлаживать эти вещи, я также не могу задать конкретный вопрос относительно этой ситуации.

TL;DR Я не понимаю, почему этот последний редуктор не работает.

Вернуться на верх