This video is available to students only

Building the services

This lesson focusses on building the data-handling services and core Redux management system for the Dinosaur Search App

Building the services and core structure#

We’re going to introduce something a little different in this final project, the concept of services. If you’ve been developing for a little while, the idea of a service layer won’t be anything surprising or new to you, but for the rest of us introducing some data-handling services will give us some separation between different layers of our app.

Ideally, the frontend UI should just concern itself with asking for data, receiving it and then displaying it to the user, allowing them to interact with it. It shouldn’t know (or care) where this data comes from, or how.

That’s the idea behind creating our various [name].service.js files that we’re going to build in this lesson.

However, for now let’s start with implementing a Redux system using the useReducer Hook and the Context mechanism, as this whole process should be fresh in your mind from the previous module.

initialState.js#

We’ll begin by opening the initialState.js file in the /redux folder. Add the following initialState object in its entirety:

You might remember that this offers us a good at-a-glance starting point for the sort of structure we want our app’s state to take. We’ll plug this file into our reducers to effect change upon it as each reducer function is called.

At the moment, however, you can see that we have two slices of state: auth and dinos. Each has a loading flag set on it (which we can use to toggle some sort of loading UI in the components) and you can see that the dinos slice has a favourites array where we’ll keep track of our favorite dinosaur id values.

At this point, you may be starting to suspect some British involvement in the development of this course! Of course, you would be right (I am a UK developer after all). That's why the Favourites component and functions dealing with the favoriting and unfavoriting of dinosaurs contain the British spelling of the word "favourite". Feel free to change these however you wish, just make sure to update all the file and function references from to share the same names or you'll run into errors when you run the project.

Save the file and let’s move on.

authReducer.js#

As you may expect, the authReducer.js file will handle state updates that relate to the auth slice that we’ve just seen. Specifically we’re interested in a few state changes:

  • Trigging a loading status change upon signing a user in.

  • Updating the user object when we’ve successfully finished signing in.

  • Performing a state reset when the user signs out.

Start by creating a set of actions:

The actions variable is just a plain JavaScript object that houses some hard-coded action strings. Next, it’s time for the physical reducer code:

You can see we have three different switch cases to handle the three scenarios we outlined earlier. Each one returns a new copy of the state object, only changing those parts that it needs to.

The only time we’re concerned with using the action argument passed to the reducer is when the user has successfully signed in and we get a user object back — you might remember this from the previous lesson where we explored the API.

The complete file#

The file in its entirety now looks like this:

dinoReducer.js#

The dinoReducer.js file is going to look very familiar to the authReducer file in its approach. This is something I highlighted in the previous module on Redux, where things might look a little alien and complex to begin with, but once you’ve built a Redux system, extra additions to it start to look familiar.

Let’s define this reducer’s actions:

This time we have four actions, two for fetching dinosaurs and two to handle the favoriting and unfavoriting of a particular dinosaur.

Let’s add in the reducer body: