Use Two Reducers Together

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet

Reducers can easily be used inside one another to update related state. This lesson shows how you can use the clock reducer inside of the people reducer to create the time for each new person.

[00:00] One of the neatest things about reducers like this clock reducer is that I can actually use it in other places. I can just drop it in here, say, "Hey, I want a default time which I can manage inside of my people reducer from this clock." If I try it right now you'll see I'll have an undefined type. You can't read type of undefined.

[00:23] We'll go ahead and set a default type on this, just to save us from hitting that error because it's checking for type and that's undefined on that first pass. Now when it's undefined, it'll get that assigned to an empty string. Hit the empty string and return to state.

[00:42] Now when I hit Save and Refresh, you can see now I'll get the time Sarah is in this and I can do that for each of our people here. I'll copy and paste clock, clock, clock. I'm also going to update this pipe here. We're using Date and the date is formatted just JMS, to give us the hour and seconds.

[01:14] You'll see Sarah, John, Nancy and Drew are all in that same time and that's the time that this timer started. Our timer is still incrementing three seconds at a time. Let's go ahead and change that so it's just doing one second. You can see that it all started in the same spot and now our main clock is incrementing but these guys are all locked in time from where we started.