My Experience with React/Redux
When completing my JavaScript project using pokemon and their trainers, I was really relieved on how it came out. I thought it looked pretty awesome for what one Junior Developer was capable of. But now I was tasked to now use that same JavaScript knowledge, incorporate React along with Redux and use Ruby on Rails API as my backend to hold all of my data. I thought to myself how hard could that be? Turns out I learned a lot more than I expected.
Let’s start off with the basics, what is React? What is Redux? What do they even do? React is a Javascript library that was created by Facebook in 2011, it’s a tool that helps create User Interface (UI) components. This is is an amazing tool to have, not only do you not have to re-write components over and over again but now you could just make one component, have the props (properties) be passed through that component to be used several times over. Now Redux is a predictable state container that was made to behave consistently throughout a client, server, and native alongside making it easy to test. An example I used in my sneaker project is that I used { connect } from react-redux to quite literally connect my React Component to a Redux store. What that did for my component is it gave my component data that it needed from the store. In this example below, the component needed the data that the user submitted within the form to create that sneaker, postSneaker is an action that was receiving the data from the component and using said data to create a sneaker.
Thats just the tip of the Iceberg when it came to my project. It looks a little complicated but with React and Redux working together through out the application it keeps it stable. You can see a lot of things are being imported from different files such as style and postSneaker, these are required for everything to work together properly. The file postSneaker is located within an actions folder that takes the information taken from the SneakerInput component and tells the backend to create a new sneaker within the database then takes the response from the database and creates a json response for JavaScript and finally then takes that same response and uses dispatch to add a sneaker to the reducer as well which is then helped by [redux] Thunk. The code is shown below as a reference.
As you can see, this action was being exported, It’s being used within the SneakerInput.js file, being used within the submit function that was created to take in all information continuously and continue to create sneakers.
There is still a lot of other actions, components and backend stuff that I’ve learned with using React and Redux. But to keep this part brief, My experience with JavaScript’s React and Redux was quite incredible because they offer a vast amount of ways to create functions that could be used over and over again by just importing those actions that hold the functions into several different components so developers don’t have the need to continuously create the same functions for all of their components. This helps keep code clean, less confusing, while having everything work within the application.
I will be publishing something similar to my experience with React and Redux very soon. But for now; thank you for reading and have a wonderful day!