Jomatrix — React, Redux, & Rails API
We’ve made it to the final phase of Flatiron School’s Software Engineering Bootcamp Program, and boy did they save the best for last! The introduction of React & Redux to our development stack was a rather intimidating experience, but ultimately a rewarding one. It started off with a bit of a familiar feel in terms of an Object Oriented Design pattern, then it took a sharp turn when we started passing objects up and down a component tree —it definitely took lots of practice to get used to managing state and prop objects. Redux also requires some very close attention when learning about its functionality and applicability, but once you’ve got the hang of its design pattern, you begin to understand its power when it comes to much larger React applications that have a much more complicated component tree structure.
With that said and with just one week to build our final project, I decided to model my application after a familiar photo sharing app called Instagram (the ‘photo sharing’ aspect at least).
Rails API
Rails once again makes a guest appearance, and although not the star of this project, it serves its important value by hosting our backend server api. The resources I’ve utilized for this application consist of the User, Post, Comment, and Like models. With the models & associations defined, controllers built, and the database migrations properly migrated, our Rails API now exposes our server to interact with our frontend React application.
React
We learned that we can define a React component either as a Class Component or a Functional Component. Both have their uses, but essentially (at least at the time of writing this blog post), either method can achieve the same results. For Jomatrix, I’ve decided to use primarily Class Components, with the occasional use of Functional Components for basic rendering.
Component Tree
The functionality of a React Class Component is what gives React its robust features and incredible versatility. Components can import other components, and you can pass objects down to those imported components by explicitly defining the properties you want to send down. Here’s a visual of what it might look like when importing child components to a top-level ‘Profile Container’ component, with those children importing other components as well:
Right away, we can see how the ‘component tree’ is formed as a parent component has one or more child components, and those child components have their own children as well, and so on. One important thing to note here is that data can be passed all the way down the tree, so long as we properly and explicitly pass that data through each branch (or component) that connects to the source of that data.
Additionally, data can also be passed up the component tree. This was a bit mind boggling for me at first, but the way I’ve come to understand this concept is to utilize functions to carry the data up to the parent component. By passing a function down to the child component as a property, we can send data back up to the parent by calling the function in the child component, and passing data through it as an argument.
As a side note, in order to use the data in the child component, React allows us to reference it by specifying this.props in front of the property name.
State Object
In addition to using props, each component can also have its own state object, which keeps track of data while that component is mounted to the DOM. The state object is defined directly inside the component, which looks something like this:
The state object is incredibly useful as React provides us ways of dynamically updating its values, which is something that is not inherently available to us from a typical javascript application. With the combination of using both state and props throughout our component tree, we can easily pass data from one part of our application to the other. That is, until our application scales and our component tree becomes so massive that passing data up and down becomes a difficult and tedious task. Enter the magic of Redux!
Redux
Redux is a beautifully designed solution for exactly this problem. Basically, we remove the source of our data from the component tree altogether, and instead, we allow it to live in something we call a ‘Redux Store’. If you want to grab data from this store, Redux provides a { connect } function that can connect any component to the store and make the data available to the component as if it were a property sent down by its parent (which means you can refer to the data by specifying this.props followed by the name of the property).
The magic doesn’t stop there — not only are you able to retrieve data from the store, but you can also update data. Redux allows us to do this by dispatching an action to the store, which carries information about how we want Redux to handle our request and ultimately affect the store’s data. For me, it sort of felt similar to my experience with how Rails routes data to the appropriate controller & action, then outputs your desired response.
When I first saw the syntax for Redux’s design pattern, it definitely felt extremely alien to me, and I’m sure others in my cohort felt the same way. But after sifting through its documentation, learning more about it through lectures & labs, and utilizing its awesome functionality in Jomatrix, it really started to become second nature. I will absolutely be using Redux in future projects.
Conclusion
It’s hard to believe how quickly 5 months have passed, and graduation is just right around the corner. I’ve honestly learned so much from Flatiron School, and I’m so grateful for the entire experience. I don’t know about other cohorts, but I think mine in particular was fantastic with an incredible cohort lead, and I’m so excited for everyone to start our new careers as Software Engineers. We’ve all overcome so many obstacles to get to this point, and we should absolutely find the time to celebrate! Because moving forward, we’ll only be met with new obstacles, but we’ll find ways to overcome those as well, I have no doubt about that. So, to all the members of my cohort, I just want to say congratulations, good luck with the job search, and keep in touch! =)
Jomatrix ~ React, Redux, & Rails API
If you’re interested in viewing the source code or contributing to this project, feel free to check out its Github Repos: frontend and backend. Additionally, the video below provides a walkthrough demo of the application:
