React-Redux Frontend Rendering Data From Rails API Backend Tutorial

This tutorial will build off of my previous one here. My previous tutorial walked you through how to create new Rails model objects with data from an external webpage scraped with Nokogiri. Our end result was a giant JSON array representing a Dance Class model index with information scraped from the Millennium Dance Complex website. This tutorial will walk you through how to fetch this JSON array from our completed Rails API and render it as a neater list using a React-Redux frontend.

Before you can complete the first step of this tutorial, you must hook up this React app to your Rails API backend. I recommend using the create-react-app generator and the foreman gem to do this, as outlined in this great tutorial.

Once you’ve completed these initial steps, let’s get started! Because web requests in JavaScript are asynchronous, we often run into problems retrieving data from APIs. A middleware called Redux Thunk resolves the issue when an action creator returns an action before the data is retrieved. Make sure you’re in your client directory and run npm install –save redux-thunk. Following this format, you will have run npm install –save for react, react-dom, react-redux, redux, and react-router-dom as well.

Now let’s set up our src/index.js file:

Next let’s set up our src/App.js file:

Here’s a general roadmap for what we want to happen. I’ve only defined one route for the sake of this tutorial, ‘/dance_classes’, which renders an undefined DanceClassList component. When the user visits this route, this component will invoke a fetchDanceClasses() action. Right after invoking this function, we will dispatch an action that we are loading data. Then we will fetch all dance classes from our Rails API. Once the returned promise resolves, we will dispatch another action with all of our dance classes that gets sent to our reducer. Our reducer will add these dance classes to our state, and we will use MapStateToProps() to access them inside our component. And then our DanceClassList container will render a yet to be defined DanceClass component for each DanceClass JSON object in its props. Whew!

When I feel there’s a lot I want to tackle I prefer to start by organizing my file tree and name all of the empty files that I know I will eventually need. Let’s create 4 new directories inside our src directory: actions, components, containers, and reducers.

Inside actions, make a new empty file named danceClassActions.js. This is where we’ll define fetchDanceClasses() later. Inside components, create a new empty file named DanceClass.js. Inside containers, create a new empty file called DanceClassList.js. Inside reducers, create two new empty files called danceClassesReducer.js and index.js.

Let’s start in our reducer and actions. Inside reducers/index.js let’s define our root reducer. This way if you want to add additional reducers in the future, you can easily import them here.

We will now have to import our root reducer into our app. Add import rootReducer from ‘./reducers’; to the top of your src/index.js file.

Now let’s create our dance classes reducer:

We’re defining an initial state of loading: false and all: []. We have two dispatch actions, one which will be dispatched when fetchDanceClasses() is invoked, and the other which will dispatched once the fetch request is made. The response from our fetch request (i.e. action.payload) will set to the state in our all array. We always need a default case returning the state.

Next is our actions file:

We dispatch our ‘LOADING_DANCE_CLASSES’ action as soon as the function is invoked. Then we fetch ‘/api/dance_classes.’ If you set up your proxy in client/package.json how the fullstackreact.com tutorial linked in the beginning of this post instructs, this request will hit our Rails routes and DanceClasses#index controller action. Finally, we dispatch our ‘FETCH_DANCE_CLASSES’ action and pass along the fetch response in JSON format as our action payload.

All that’s left to do now is our React components!

Our DanceClass Component is the most simple, so let’s tackle that one first:

We will have to import this DanceClass component and pass in the props for each individual dance class inside our DanceClassList container. Here’s our container:

I am organizing my dance classes by day, and mapping each dance class for that day of the week to be mounted into an individual Dance Class component.

Our connect function at the bottom of the page is listening for a change in the part of the state provided inside our #mapStateToProps function, in this case state.danceClasses.all. We can access this part of the state in our component in a prop specified as danceClasses. We have bound our fetchDanceClasses action to our component props inside the #mapDispatchToProps function. Our connect function also specifies which component we are connecting the state and action creator to, DanceClassList.

If you start your server and navigate to /dance_classes, you should see a simple list of all your dance classes!

You can find my updated version of this app, with added features like user authentication, schedule management, adding/deleting reviews, favoriting /unfavoriting instructors, and more on Github here.