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.
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
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 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
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
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
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:
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
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
The only part we need to change in the component’s logic functions is in the
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.