Redux selector using incorrect state slice

Question

Im currently doing a flashcards project from codecademy.com which involves making a flashcard application using React and Redux where you create a topic and then you can make quizzes for each topic, i have a selector (export const selectQuizzes = (state) => state.quizzes.quizzes;) which is supposed to return this slice of state:

quizzes: {
    quizzes: {
        '456': {
            id: '456',
            topicId: '123',
            name: 'quiz for example topic',
            cardIds: ['789', '101', '102']
        }
    }
},

but instead it is returning this slice of state:

topics: {
    topics: {
        '123': {
            id: '123',
            name: 'example topic',
            icon: 'icon url',
            quizIds: ['456']
        }
    }
},

This is my whole quizzesSlice.js file

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

//* Define the options that createSlice will use
const sliceOptions = {
  name: "quizzes",
  initialState: {
    quizzes: {}
  },
  reducers: {
    addQuiz: (state, action) => {
      const { id, name, topicId, cardIds } = action.payload;
      state.quizzes[id] = {
        id: id,
        topicId: topicId,
        name: name,
        cardIds: cardIds
      };
    }
  }
};

export const addQuizThunk = (quiz) => {
  const { id, topicId } = quiz;
  return (dispatch) => {
    dispatch(quizzesSlice.actions.addQuiz(quiz));
    dispatch(addQuizId({ quizId: id, topicId: topicId }));
  };
};

//* Create a new slice of state with the sliceOptions configuration object
export const quizzesSlice = createSlice(sliceOptions);

//* Selectors
export const selectQuizzes = (state) => state.quizzes.quizzes;

//* Export actions generated by createSlice()
export const { addQuiz } = quizzesSlice.actions;

//* Export reducer generated by createSlice()
export default quizzesSlice.reducer;

And i am trying to use my the selector in this file (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); // replace this with a call to your selector to get all the quizzes in state

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

But i get this error:

This is because the selector is passing the wrong state and i dont know why?

score 1 · Answer 1 · answered Dec 11 '22 at 14:57

Turns out i didnt include the quizzesReducer in my combine reducers store function, before it was:

import { configureStore } from "@reduxjs/toolkit";
import topicsReducer from "../features/topics/topicsSlice";

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

but it should have been:

import { configureStore } from "@reduxjs/toolkit";
import topicsReducer from "../features/topics/topicsSlice";
import quizzesReducer from "../features/quizzes/quizzesSlice";

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

Redux selector using incorrect state slice

1 Answers1