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.
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:
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
Favouritescomponent 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.
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.
userobject when we’ve successfully finished signing in.
Performing a state reset when the user signs out.
Start by creating a set of actions:
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 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: