This video is available to students only

Extending the Event Sign-Up App

This lesson takes things further by extending the Event Sign-Up App to use the Redux Toolkit for even easier state management.

Extending the Event SignUp App#

At this point we’ve built a fully functional and extensible redux-powered signup app that uses the various redux mechanisms of actions, dispatching, and reducers to update a centralized store. We’ve done this with the help of the React Redux library which provides a little help in a relatively unopinionated fashion.

However, I wouldn’t blame you if you followed along during the previous lesson thinking "wow, this is a lot of overly complex and fussy-looking code". The use of Redux isn’t too bad in component files, but I’m sure you’ll agree that in our eventReducer file especially, things start to look quite messy and increasingly difficult to read and maintain. Think what this could look like if we added more reducer cases in here to handle different actions!

But don’t worry, there is a much nicer way to bring Redux into your projects in the form of the Redux Toolkit, made by the same folks who brought you React Redux. What it offers is a much more opinionated, prescriptive approach to introducing Redux to your applications.

In this lesson we’re going to swap out the reducer and store creation mechanisms in the React Redux library for those offered by its much more agreeable sibling, the Redux Toolkit. We’ll need to remove some dependencies, introduce some new ones and edit some of our files. You’ll notice subtle changes in some of our components, but quite a dramatic change in the main eventReducer file where we’ll see that the effort of creating actions and the reducer function has become hugely simplified and much more natural-looking.

I’ve used a lot of different redux approaches across a number of commercial projects and I much prefer the one that the Redux Toolkit offers.

It’s worth highlighting at this stage that outwardly, on the front end, our app won’t change at all. This is a great exercise in refactoring and changing the behind-the-scenes functionality in your applications whilst maintaining the same experience for the user.

Without further ado, let’s get started!

Switching up dependencies#

We need to firstly remove the - redux-thunk dependency from our existing project - the Redux Toolkit bundles this commonly-used package in with its offering so we no longer have use for this.

You can either remove the package using the explicit terminal commands, yarn remove redux-thunk or you can delete the node_modules folder in the project, edit the package.json file with the new package names and run yarn install again to wire everything up.

I’m going to do the former to save me having to install all the packages over again, but either approach nets the same end result.

Add the new dependency#

We only have the one new dependency to add now, so back in the terminal issue the following command:

The React Redux team offer a number of libraries in their namespace which is prefixed with the ‘@‘ symbol, hence this package may look a little different than you’re used to.

Changing our files#

Not every file is going to change, but a lot of them are. Fortunately, most of the changes are quite small. The major changes will be around configuring our store and in the reducer file where we’ll see a rather dramatic reduction in the volume of code.

Let’s get started by editing our existing components.

Editing EventSignUpList.jsx#

Open up the EventSignUpList component and let’s take out our code scalpel and get cutting.

Head to the bottom of the file and replace all the mapping functions with a more familiar, typical component export line:

We no longer need to explicitly map various elements of state and dispatch to our component as the Redux Toolkit library offers us some handy Hooks that we can use instead, wiring up all what we need in the background.

Next, back at the top of the file, we’re going to change the following line:

We’ll remove the connect import and swap it for two Hooks, useSelector and useDispatch:

The first, useSelector will allow us to select part of the state that we need, using a helper function that we’ll create when it’s time to edit our reducer file. Similarly, useDispatch gives us access to the dispatch function in the redux store to dispatch our actions.

We’ll also need to import a new action, selectAttendees from the eventReducer file. We haven’t created this just yet, but don’t worry, we’ll get to it soon enough.

In the meantime, in order to use these new Hooks, we’ll edit the EventSignUp declaration:

Although we’ve kept the imported actions from our event reducer file, our component will no longer be passed them via props, so we can safely remove them from our component’s declaration.

We do need to create a couple of variables, however, namely eventAttendees and dispatch. You can see we’re using the new Hooks to populate the new variables. The useSelector Hook is called with the selectAttendees function we imported. When we create it later in the lesson, it will allow us to grab a portion of our app’s state and, when used in conjunction with the useSelector Hook, provides components with access to that same slice of state.

The dispatch variable is provided with the redux dispatch function as a result of calling the useDispatch Hook. We’ve kept the variable name the same for familiarity’s sake.

The last thing to change is to make a subtle change to how we’re dispatching our redux actions. Notice how we haven’t had to edit the eventAttendees check? As far as our component’s JSX is concerned, the useSelector Hook has provided it with the information it needs so our null-check can remain the same here.

However, we do have to change the click events on our buttons. Scroll down a little and locate the onClick events on each button. The actions we’re calling here won’t change. The difference is that they are no longer implicitly connected to the redux store and so won’t be automatically dispatched. All we need to do to make that happen now is to wrap the existing calls with the dispatch() variable we created earlier.

And that’s it done. The completed changed component now looks like this:

Editing EventSignUpForm.jsx#

Now that we’ve seen the changes we need to make, we can make those exact same changes in our EventSignUpForm file. Open it up and let’s start with the imports section:

Again, we’ve removed the connect import and replaced it with the useDispatch Hook. We’re not going to use any data from state in this component so we won’t be needing the useSelector Hook.

Next, just as before, scroll to the bottom of the file and replace all of the mapping functions with a single export statement:

Back up at the component declaration line remove the addEventAttendee call in the props destructuring. And let’s add a new variable, dispatch, that calls the useDispatch Hook.

The only part we need to change in the component’s logic functions is in the handleFormSubmit event.

We’ve explicitly created a newEventAttendee variable here that copies across the form field values from state and adds a new property attending, setting it to true. We then pass this to the addEventAttendee just as we did before, but notice how we’re wrapping this all up in the dispatch() function again.

 

This page is a preview of Beginner's Guide to Real World React

No discussions yet