React/Redux and Rails API: The Final Front(ier)end/Backend

Wrapping up the last phase of the 20 week Flatiron School Software Engineering program comes with a lot of mixed emotions. From excitement, stress, and pride to stress, doubt and the infamous “trapped in the pit of despair” feeling mentioned at the introductory portion of the program. Between family, learning the ways of React and Redux, and personal obligations, I found myself struggling to keep track of arguably the most important task of my day: taking my medication. I was instructed to now take the usual dose twice a day, and I was having trouble remembering the last time I took the medication. As I was studying React, I thought to myself: why not find a solution to your problem? Why not implement what you’ve learned into a tangible react-app that can benefit your everyday life? And thus, I decided to try my hand at creating a virtual medication tracker, Where a person can add an instance of a medication and update the last time they took it.

Learning React and Redux at the same time was challenging, but it was also quite fun and I learned a lot in the process. The best way to learn the React framework is by creating a React app yourself and playing around with the code. The concept of state and props can be a little confusing if you’re not familiar with react because both can appear to be quite similar on the surface and often work in conjunction with each other.

Rails API

I began by creating a Rails API. Here I created a resource of Medication by taking advantage of Rails scaffold generator. Here’s what the schema looks like:

The backend repository can be found here. After having the Backend database set up, I began to work on the Frontend. I created a react app with the following commands:

npx create-react-app my-app
cd my-app
npm start

In my case, “my-app” was replaced by my “medication-tracker”. These commands come directly from the official React documentation and I recommend anyone learning this framework to go through it.

Setting up a Redux store

The hardest part of starting the process was setting up the Redux store. It is not difficult per se, but it is rather complex . As you must have the appropriate packages, imports, and functions set up, it can be a tad overwhelming if you’re not familiar with it. However, I found that after the initial set up, connecting to the store inside a component relatively simple and straight forward(more on that later).

According to the official React-Redux documentation, we first install React-Redux as a dependency by running the following commands:

 npm: npm install react-redux
           or
 Yarn:yarn add react-redux

If you haven’t done so already, you also need to make sure to install Redux.With the appropriate packages installed, we can now begin the process of setting up the store.

I created a Redux folder where with two folders: one for the action creators and one for the reducers.

redux folder

According to the official Redux documentation: reducers are functions that take the current state and an action as arguments, and return a new state result. Actions are plain JavaScript objects that have a type field.

In essence,(state, action) => newState.

Reducer example.

A Redux app only has one reducer function, which is typically called the “root reducer.” This function is that is passed in the createStore inside the main index.js file.

In accordance to the official Redux documentation, the root reducer function is responsible for handling all of the actions that are dispatched, and calculating what the entire new state result should be every time.

Thunk handles a lot of the logic that actually gets this to work but that I won’t get into that in this blog.

Setting up a Components

I divided the components into two folders: components and containers.

The components folder is home to only those components that are entirely presentational. All the components that contain logic needed to pass information down into the presentational components are inside the containers folder.

The majority of the app’s functionality is inside the Medications.js file. This is where we get the entire state by connecting to the store, iterate the obtained state(in this case several medication objects), and pass down each one of them as props into the individual presentational Medication component. In my case, each instance of a medication passes down their medication prop into an Edit and Delete component, and use this information inside the action creators in order to implement fetches to the right url.

Styling

I used React-Bootstap to add styling to each individual Medication component, and CSS to style the navbar.

Feel free to check out the demo video and repository.