The thunk section definitely gave me trouble. The only instruction in the course was for async thunks and I was just having trouble visualizing a synchronous thunk.
This is my solution for the Flashcards project. I had to start this entire Redux section over several times before I was able to finally get to this point. It was worth it… Keep at it!!!
I did not do this project in the Codecademy environment, I used VSCODE for all of it and I would recommend the same to others as you can debug A LOT better there. The Codecademy environment works great for the lessons, but it is much better to work on the projects inside of our own dev environments imho…
Some advise to those who are having trouble with this one USE REDUX DEV TOOLS A LOT!!!
I did not do this project in the Codecademy environment, I used VSCODE for the project. If any of you have a problem using the file provided by Codecademy due to an outdated version, here is the boilerplate I used.
If I try and do it on platform I get the error that others have gotten which is “Store doesn’t have a valid reducer”.
If I do it off platform, pretty much everything is deprecated, which sucks but it’s not too bad except I can’t run npm start because I get an error. I shouldn’t have to debug the starter code to get it to work. I have had issues like this before which is why I initially just tried it on platform, but I just can’t get it to work.
EDIT: If anyone else is having these issues you should use @joacopaz updated version of this project that can be found below. The “Store doesn’t have a valid reducer” error is something to do with codecademy’s ide i think. I am grateful they made this so I can complete the project, however it should not be down to community members to fix codecademy’s broken and out of date projects.
Cheers mate! Your code was a helpful guide in getting my own setup to work. Can I ask why you’re not using createBrowserRouter() and createRoutesFromElements()? I suspect this is because you define the routes at the bottom of the App function, but my knowledge is shaky around these things and I’d appreciate if you (or anyone) could shed light on this.
I’m trying to recall the decision making process, reading the docs and seeing the original code, I suspect the reason I went with importing the BrowserRouter instead of creating it as the docs recommend with createBrowserRouter() is because it was the closest way to bridge the gap between the legacy/outdated code of the exercise and the new way to build routers in v6 onwards.
I would recommend if you feel comfortable building it with createBrowserRouter to do so as the docs recommend it as the preferable way. But the modules that teach us about react-router are so deprecated that I tried to mantain similarity in how the original exercise structure was as to not have to refactor every single route and just keeping it as similar as possible, as the original form.
TLDR the idea was to make it functional and user-friendly, but I would recommend to use createBrowserRouter if one is interested in delving deeper into the documentation.
That makes a lot of sense. As you say, while it’s better to use the recommended method, there’s potentially a lot of work involved in making sure everything in the old code still works as intended. I think you went for a good middle way for this project and as long as we’re aware of recommended route and the trade-offs, we’ll have learned lesson and can implement the right way for new projects.
Thanks for your extensive response, joacopaz! Appreciate it!
Here is the solution to my Flashcards project. I used joacopaz’s boiler plate repo in order to be able to complete the project. It can be found here Commits · joacopaz/Flashcards_Boilerplate · GitHub. I was a little worried with using Redux, however this project is a great intro to it. I am going to try a few more projects so that I kind become more familiar with it.
Have you checked the configureStore() in the src/app/store.js file?
I also had the same problem and it works fine after I have added quizzes slice to the reducer property in configureStore function.
The store.js’s code should look like this:
import { configureStore } from "@reduxjs/toolkit";
import topicsSlice from "../features/topics/topicsSlice";
import quizzesSlice from "../features/quizzes/quizzesSlice";
export default configureStore({
reducer: {
topics: topicsSlice,
quizzes: quizzesSlice // < ----- This is the missing slice of quizzes!
},
});