Flashcards Challenge Project

Hello Everyone! Im hoping someone can give me a hand with this project today as it is driving me insane.
Im working in the Flashcards Challenge Project and I am stuck on step 14/15. I am unable to render new Quizzes.
it is throwing and error when I pass the selector “selectQuizzes” from que quizzesSlice.js to Quizzes.js and Quiz.js. For some reason its not able to read the state in the quizzesSlice.js.
The error says

TypeError: Cannot read properties of undefined (reading 'quizzes

 28 |     }}
  29 |     
  30 | export default quizzesSlice.reducer;
> 31 | export const selectQuizzes = state => state.quizzes.quizzes;
  32 | export const {addQuiz} = quizzesSlice.actions;
  33 | 

Here is my code:
quizzesSlice

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


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

export const addQuizzThunk = (payload) => {
    const { quizId, name, topicId, cardIds } = payload;
    return (dispatch) => {
        dispatch(quizzesSlice.actions.addQuiz(payload));
        dispatch(addQuizId( { quizId: quizId, topicId: topicId } ));
    }}
    
export default quizzesSlice.reducer;
export const selectQuizzes = state => state.quizzes.quizzes;
export const {addQuiz} = quizzesSlice.actions;

quizzes.js

"import { Link } from "react-router-dom";
import ROUTES from "../../app/routes";
import { useSelector } from "react-redux";
import { selectQuizzes } from "./quizzesSlice";

export default function Quizzes() {
  const quizzes = useSelector(selectQuizzes);
  return (
    <section className="center">
      <h1>Quizzes</h1>
      <ul className="quizzes-list">
        {Object.values(quizzes).map((quiz) => (
          <Link key={quiz.id} to={ROUTES.quizRoute(quiz.id)}>
            <li className="quiz">{quiz.name}</li>
          </Link>
        ))}
      </ul>
      <Link to={ROUTES.newQuizRoute()} className="button">
        Create New Quiz
      </Link>
    </section>
  );
}"

quiz.js

"import { Link, useParams } from "react-router-dom";
import Card from "../cards/Card";
import ROUTES from "../../app/routes";
import { selectQuizzes } from "./quizzesSlice";
import { useSelector } from "react-redux";

export default function Topic() {
  const quizzes = useSelector(selectQuizzes);
  let { quizId } = useParams();
  const quiz = quizzes[quizId];

  return (
    <section>
      <h1>{quiz.name}</h1>
      <ul className="cards-list">
        {quiz.cardIds.map((id) => (
          <Card key={id} id={id} />
        ))}
      </ul>
      <Link to={ROUTES.newQuizRoute()} className="button center">
        Create a New Quiz
      </Link>
    </section>
  );
}

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.