⚠️ This lesson is retired and might contain outdated information.

Combine Individual Reducer Functions into a Single Reducer with reduce-reducers

Andy Van Slaars
InstructorAndy Van Slaars
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated a year ago

In this lesson, we’ll add the reduce-reducers library to our project and use it in conjunction with the handleAction function from redux-actions to define separate reducer functions for each action and reduce them into a single reducer function with reduce-reducers. Say reducer one more time!

Instructor: [00:00] here we've created a single reducer function that's specific to the add todo action using handleAction from redux-actions. In order to get that into our application without changing the structure of our reducers, we made a call to that in our switch case statement for the add todo action passing the state and action through.

[00:19] Ideally, we'll like to be able to get rid of this switch statement all together and create individual reducers for each action. Let's start by adding the reduce reducers library to our project. I'll use yarn add reduce reducers. With that installed, let's import it into our file. Up at the top, I'll add an import.

[00:47] We're going to import reduce reducers from reduce reducers. Now that we have this imported, let's go down to our reducer and refactor a little bit. I'm going to scroll down. We're going to find our add todo reducer, which we've created with handleAction, and our default export, which is our main reducer.

[01:14] I'm going to give this a name. We'll call it "Main Reducer." That's going to equal that reducer function. Because we already have a reducer for add todo, I'm going to remove that from the switch statement here. We're going to handle the ones that don't have individual reducers in this main reducer.

[01:34] Now I'm going to replace the default export, so I'll scroll down underneath. I'll do an export default. This is going to be a call to reduce reducers, passing in our main reducer and our add todo reducer. Now if this does what we expect, this is going to give us one reducer that encapsulates both of those reducer functions.

[02:03] Everything should continue to work like it was before. I'll save this, switch to a browser, and when our app reloads, we should see everything continuing to work, including adding a new todo. I can still toggle and delete just like I did before.

[02:27] This means that instead of creating these individual reducers and having to fit them into the old switch case statement, we can create a bunch of individual reducers, reduce those, and return that as a single reducer function. I can come up here. I can create a load todos reducer. That's going to use the same handle action call.

[02:51] We'll pass this our load todos action and reducer function. That's going to take in state and an action. Then, it's going to return a new state. That's going to be exactly what we have here. I'll copy and paste that. Then, we want to pass it our initial state. With that defined, I can come up here and copy this, take this case statement out of our switch.

[03:22] Then we can drop down to the end of our file and we can pass this new reducer function into reduce reducers. I'll save that. I'll switch back to the browser. We'll see that everything continues to work just like it did before.

[03:44] We could continue this process, create individual reducers, pass them into reduce reducers, and eventually get rid of this main reducer with this switch case statement. After creating individual reducers for each action type with handleAction, this is what our code will look like.

[04:03] We'll have reducers for add todo, load todos, update current, replace todo, remove, show loader, hide loader. Then all of those get combined with reduce reducers. Then if we look in the browser, we'll see that our application continue to load and function like it did before...

~ 5 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today