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?