How to solve "Uncaught TypeError: Cannot read properties of undefined (reading 'quizzes&#0-CodePudding

I'm pretty fresh to redux.

I can't seem to workout why my redux selector that I have export const quizzesSelector = (state) => state.quizzes.quizzes; on line 31 is producing the "Uncaught TypeError: Cannot read properties of undefined (reading 'quizzes')" error.

Where am I going wrong here? Why is this reading undefined? If found, a small explanation would be good as I am still trying to wrap my head around state, store, dispatch, etc.

Thanks

import { createSlice } from "@reduxjs/toolkit";
import { addQuizId } from "../topics/topicsSlice";

const quizzesSlice = createSlice({
  name: "quizzes",
  initialState: {
    quizzes: {}
  },
  reducers: {
    addQuiz: (state, action) => {
      const { quizId, name, topicId, cardIds } = action.payload;
      state.quizzes[quizId] = {
        id: quizId,
        name: name,
        topicId: topicId,
        cardIds: cardIds
      };
    }
  }
});

// thunk to quizz to the related topic
export const addQuizAndQuizId = (quiz) => {
  const { quizId, name, topicId, cardIds } = quiz;
  return (dispatch) => {
    dispatch(quizzesSlice.actions.addQuiz(quiz)); // dispatch the new quiz
    dispatch(addQuizId({ quizId: quizId, topicId: topicId })); // Dispatch the new quiz and topic id
  };
};

export const quizzesSelector = (state) => state.quizzes.quizzes;

export const { addQuiz } = quizzesSlice.actions;

export default quizzesSlice.reducer;

CodePudding user response：

Although many things can be suggested here for just getting the store value you should do this in the shown file

import { createStore } from 'redux'

const store = createStore(reducer)

This store must be added to the root of your App.

Wherever(components) you need to use the state now or dispatch any actions you can simply do this

import { useSelector, useDispatch } from 'react-redux'

const count = useSelector((state) => state.counter.quizzes)

I would suggest you give this quick start guide a read https://redux-toolkit.js.org/tutorials/quick-start

CodePudding user response：

I found the answer. The reason the quizzes state was reading undefined was because it was never imported into the store.

Whilst I know createSlice automatically generates action creators and action types that correspond to the reducers and state. I for some reason had in my head that once you export the default slice.reducer it automatically adds it to the store.

After viewing my store I realised it was not there and I had to import it to configureStore.

import { configureStore } from "@reduxjs/toolkit";
import topicsReducer from "../features/topics/topicsSlice";
import quizzesReducer from "../features/quizzes/quizzesSlice"; // This was not there originally 

export default configureStore({
  reducer: { topics: topicsReducer, quizzes: quizzesReducer },
});