Hello everyone,
I am currently working on the flashcards challenge project in the redux section. Here is the link to the project: Flashcards project
I am currently working on the part where I am trying to make a new quiz for a specific topic. However, when I submit the new quiz that I made, the new quiz does not render on the page. I have a feeling that it has something to do with my thunk action creator. I am not sure if I passed the correct values into the action creators, “addTopic” and “addQuizId”, when I dispatched them in the thunk action creator. Here is the code where I wrote the thunk action creator function in quizSlice.js:
import {createSlice} from '@reduxjs/toolkit';
import {addTopic, addQuizId} from '../topics/topicsSlice';
//import {useDispatch} from 'react-redux';
//const dispatch = useDispatch();
export const quizSlice = createSlice(
{
name:'quizzes',
initialState:{
quizzes:{
}
},
reducers:{
addQuiz:(state,action) => {
const {id,name,topicId,cardIds} = action.payload;
state.quizzes[id] = {
id: id,
name: name,
topicId: topicId,
cardIds: cardIds
}
}
}
}
)
export const thunkActionCreator = (payload) => {
const {name,topicId,cardIds,id} = payload;
return (dispatch) => {
// dispatch multiple actions here
dispatch(addTopic({id,name}));
dispatch(addQuizId({topicId}));
};
};
export const selectQuiz = (state) => {return state.quizzes.quizzes};
export const {addQuiz} = quizSlice.actions;
export default quizSlice.reducer;
And here is the code where I implement the thunk action creator in the “handleSubmit” event handler in NewQuizForm.js:
import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import { v4 as uuidv4 } from "uuid";
import ROUTES from "../app/routes";
import{useSelector, useDispatch} from 'react-redux';
import {selectTopic} from '../features/topics/topicsSlice';
import { thunkActionCreator } from "../features/quizzes/quizSlice";
export default function NewQuizForm() {
const [name, setName] = useState("");
const [cards, setCards] = useState([]);
const [topicId, setTopicId] = useState("");
const history = useHistory();
const topics = useSelector(selectTopic);
const dispatch = useDispatch();
const id = uuidv4();
const handleSubmit = (e) => {
e.preventDefault();
if (name.length === 0) {
return;
}
const cardIds = [];
// create the new cards here and add each card's id to cardIds
// create the new quiz here
history.push(ROUTES.quizzesRoute());
dispatch(thunkActionCreator({name,id,topicId,cardIds}));
};
const addCardInputs = (e) => {
e.preventDefault();
setCards(cards.concat({ front: "", back: "" }));
};
const removeCard = (e, index) => {
e.preventDefault();
setCards(cards.filter((card, i) => index !== i));
};
const updateCardState = (index, side, value) => {
const newCards = cards.slice();
newCards[index][side] = value;
setCards(newCards);
};
return (
<section>
<h1>Create a new quiz</h1>
<form onSubmit={handleSubmit}>
<input
id="quiz-name"
value={name}
onChange={(e) => setName(e.currentTarget.value)}
placeholder="Quiz Title"
/>
<select
id="quiz-topic"
onChange={(e) => setTopicId(e.currentTarget.value)}
placeholder="Topic"
>
<option value="">Topic</option>
{Object.values(topics).map((topic) => (
<option key={topic.id} value={topic.id}>
{topic.name}
</option>
))}
</select>
{cards.map((card, index) => (
<div key={index} className="card-front-back">
<input
id={`card-front-${index}`}
value={cards[index].front}
onChange={(e) =>
updateCardState(index, "front", e.currentTarget.value)
}
placeholder="Front"
/>
<input
id={`card-back-${index}`}
value={cards[index].back}
onChange={(e) =>
updateCardState(index, "back", e.currentTarget.value)
}
placeholder="Back"
/>
<button
onClick={(e) => removeCard(e, index)}
className="remove-card-button"
>
Remove Card
</button>
</div>
))}
<div className="actions-container">
<button onClick={addCardInputs}>Add a Card</button>
<button>Create Quiz</button>
</div>
</form>
</section>
);
}
Any ideas as to why I can’t render the new quizzes? Any help is appreciated! Thanks everyone and happy coding 
