This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Using Two Reducers Together

1:38 Angular 2 lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
EggheadAB

At 0:23 of lesson 13, where you have added a default value for the 'type' property of the action, I have also had to add a default value for 'property'.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?