Cannot read properties of undefined (reading 'editQuoteModalShown') react-redux

Question

I'm trying to create the functionality of opening and closing a modal form using react-redux and redux toolkit. It throws me the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'editQuoteModalShown')

store.jsx

import { apiSlice } from "./api/apiSlice";
import { editQuoteModalSlice } from "../features/quotes/editQuoteModalSlice";

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
    editQuoteModalSlice: editQuoteModalSlice,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
  devTools: true,
});

setupListeners(store.dispatch);

editQuoteModalSlice.jsx

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  editQuoteModalShown: false,
};

export const editQuoteModalSlice = createSlice({
  name: "editQuoteModalSlice",
  initialState,
  reducers: {
    setEditQuoteModalShownDispatch: (state, action) => {
      state.editQuoteModalShown = action.payload;
    },
  },
});

export const editQuoteModalShownSelector = (state) =>
  state.editQuoteModalSlice.editQuoteModalShown;

export const { setEditQuoteModalShownDispatch } =
  editQuoteModalSlice.actions;

export default editQuoteModalSlice.reducer;

I am using the selector this way: EditQuoteModal.jsx

import {
  editQuoteModalShownSelector,
  setEditQuoteModalShownDispatch,
} from "./editQuoteModalSlice";

export default function EditQuoteModal() {

  const editQuoteModalShown = useSelector(editQuoteModalShownSelector);

  return (
    <div>
      {editQuoteModalShown && (<Modal />)}
    </div>
  );
}

I have imported everything correctly. Don't know what is causing the error.

Answer 1

Issue

The store is not importing the correct export from editQuoteModalSlice.

store.js

import { editQuoteModalSlice } from "../features/quotes/editQuoteModalSlice";

The reducer function is the default export from editQuoteModalSlice, not a named export.

editQuoteModalSlice.js

export default editQuoteModalSlice.reducer;

editQuoteModalSlice is undefined as an import in store.js and passed along as the reducer when creating the store object.

store.js

import {
  editQuoteModalSlice // <-- undefined
} from "../features/quotes/editQuoteModalSlice";

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
    editQuoteModalSlice: editQuoteModalSlice, // <-- undefined reducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
  devTools: true,
});

Solution

Import the correct export from the editQuoteModalSlice file.

store.js

import editQuoteModalReducer from "../features/quotes/editQuoteModalSlice";

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
    editQuoteModalSlice: editQuoteModalReducer, // <-- defined reducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
  devTools: true,
});