Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Create a Reducer Function for a Specific Redux Action using redux-actions

    Andy Van SlaarsAndy Van Slaars

    In this lesson, we’ll use the handleAction function provided by redux-actions to create a reducer function that will handle a specific action. We’ll then incorporate this reducer function into the existing reducer and ensure our application continues to function.

    reduxRedux
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 I am going to update my import for Redux Actions to import the handle action function. I am going to scroll down to the bottom of this file where reducer is.

    00:10 I am going to use handle action to create a reducer for one of our actions. I am going to start and I am going to declare the addToDo reducer. This is going to be a call to handle action, and I am going to pass in addToDo.

    00:31 My second argument is going to be a reducer function that I want to handle this action. That's going to take in state and an action, just like our reducer does. In that function, I want to return the update the state based on the action so I can just take this code right here and paste that in.

    00:58 That's going to take in the state in the action and it's going to return the new state. Just like our main reducer, it needs to take in the initial state. That's going to be passed in as the third argument. Handle action takes an action type, takes a reducer function, and it takes an initial state.

    01:21 Now, we've our reducer function with specific to the addToDo action. In order for this to handle our actions within our application though, we still need to work into our main reducer.

    01:31 What I am going to do here is I am going to replace this inline logic, and for the addToDo case, I am going to return a call to that addToDo reducer that we just created, passing through the state and the action.

    01:49 All we've done here is taking our reducer logic and move it out of our switch case statement to clean up our code a little bit. Everything still works the same. We can very that by saving this, switching to our application. When it reloads, we'll see that everything is still working as expected.

    02:07 We can make sure that refactoring that addToDo reducer logic still works by adding a new to do, and we'll see that it's still working.

    02:20 If we wanted to keep breaking this up, we could take the same approach for each one of these items creating a separate reducer and just calling it with our main reducer.

    02:30 For now, we'll just leave this as this

    Discuss

    Discuss