“Meet me at the Store!” React, Redux, and all other shenanigans…
So, we’ve finally made it to Phase 5(Thank the Good LORDT!) and no one could prepare me for the JUNGLE that truly is React/Redux. I decided that I wanted this project to focus on the one thing I obsess over the most: SHOES! My application, I duly named “The SNKR Collection”, is a novice collector’s best friend — — where you can keep track of the sneakers you already have as well as adding the sneakers that you’ve been eyeing for a while and can’t seem to forget about.
Whilst starting the process of building my backend and setting up my database with rails, we finally switch over to building out the front end with React. I proceed to import all the necessary dependencies for my app to start running and in doing all of that, I realize, “I have to set up my store!”
Now, if you’re anything like me, you’re probably like, “Store?? You mean like the grocery store?” Ehhh… kinda. The “store” in React/Redux is basically an object that allows us to share state. Think of the store in React like a database, or better yet — — an actual store. We go to the store to retrieve items that we need for whatever we plan to create or use. So what’s “state” you ask? Well, state is also an object in React that allows us to create components that are dynamic and interactive.
Within our store we have things like reducers, thunk, and Middleware. These allow us to manage the status of state on a global scale within our application. They’re in charge of various occurrences whilst the app is running, like making sure that action creators are running one thing at a time, turning functions into objects, and so much more.
The store is also how we connect our functional and class components with each other and with their respective action and have them working together in state. Functional components use things called props to create instances of objects that we can use in state. They look a little something like this:
Class components also have different objects that we can create and actions that they are run by, but we can actually update or “set” state within in a class component. It looks like this:
All in all, React definitely has some awesome things that allow you to streamline your application in a way that’s different from any other framework. Building out this application was definitely a challenge, but it was one that I enjoyed learning about along the way. Definitely looking forward to building out more applications in React in the near future!
