Mainichi: A Tale of React and Redux Pt. 1 — React
So here I am, my final project at Flatiron’s and I couldn’t be happier. The accumulation of all that I currently know and can do in one project. What did I decide to do you ask? Well I made a Flash Card Website for Language Proficiency Tests. In this specific case, I did it on the JLPT, because it is what I had prior knowledge in.
If you wish to look at the codebase while reading along click here: https://github.com/DrewALThompson/Mainichi
If you wish to see it in action click here: https://www.youtube.com/watch?v=LDYgT9asmh8
It’s split into two sections the React Redux Frontend and the Rails Backend overall a pretty fun project!
So first and foremost, here’s the layout of the website. Everything is essentially controlled by two specific React Routers that allow you to navigate and work with the website however you wish to! Why two specific routers? Well that’s because I had a hard time getting the filtration of words to work without it.
When I set out to do this I didn’t realize that filtering the words to each respective page would be so difficult. I had it so that when you clicked on the Let’s Study button and loaded the respective route/container that the words would be fetched from the server (something I’ll discuss a bit more in Pt. 2). From there, I wanted it so that the words would not only filter each time you choose a different topic but also do so flawlessly. (“Why didn’t you just filter the words in the Actions and leave them stored in the Redux store?” You may ask? Because I am not a smart man and didn’t think about doing that till after I finished the project. Struggling with this; however, gave me a great understanding of how to utilize React Routers and React Life Cycles to a much greater extent so I am happy for that.)
So here’s the piece of code that helped me achieve the flawless transition. By clicking on a route, the route would pass down an id and tell the containers which words to filter and display. Badabing badaboom.
Overall the whole website is pretty cool, but in my humble opinion that is the coolest bit of React work in this page. Next up is the Redux stuff so stay tuned if you want to see what I thought of that!
