Wow! I made it to the end of the Flatiron School bootcamp program. Phase 5 introduced us to React and Redux, two libraries which work in conjunction with JavaScript. With any new programming language or library, there’s always a learning curve and this was no different. React and Redux make a programmer’s life easier by allowing us to reuse code through abstraction. We’re able to compartmentalize by separating our logic in container or presentational components.
For my React/Redux project, I created an app that will allow someone the ability to view different fashion trends and add them to their favorites where they can create a curated collection of looks.
With this this app, you can toggle the favorites button to add an item to favorites, then remove it (and it won’t delete from the application).
From there, the user can add a new look or trend in the “Add A New Look” page.
I have created forms through Ruby, Rails, JavaScript and now I can add React/Redux.
Here, I wanted to declare the state of my object in my ItemsForm component where I will be using setState to change the value of state. In order to do that, I needed to add an item action and reducer.
After I setup the html to create a form, I needed to add functionality. When an item is submitted, I need to dispatch my addItem action through mapDispatchToProps. Here I am sending that newly created data to my Rails backend through a POST request and receiving data back to my frontend determining whether or not to display an error alert or dispatch my items action through my validations.
Once the item passes validations, it moves to my reducer. In my reducer, I want to add the new item to the end of my items array. The way I accomplished this was by spreading my state array, and adding the action.payload (the new item) to the end of the array.
And this is how React/Redux work in conjunction to pass information and update state. I had a very tough time in the beginning following the logic and all of the moving parts, but after some practice, it makes a lot of sense and helps visually see how and where the data moves.
I had a lot of ups and downs with this project, but the main takeaway was how much I learned about React/Redux just by trying new things and playing around with the code to see how everything is connected. I am looking forward to continuing my education on JS, React and Redux.
