This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Dispatching Action Types to Reducers

1:21 Angular 2 lesson by

A reducer needs to know what you want it to do whenever it's called. You do this by passing along an action type then the reducer can switch based on the type to achieve the logic you need. This lesson covers dispatching action types to your reducer to update the state based on that type.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

A reducer needs to know what you want it to do whenever it's called. You do this by passing along an action type then the reducer can switch based on the type to achieve the logic you need. This lesson covers dispatching action types to your reducer to update the state based on that type.

Currently the way this is set up is you have these magic strings, hour and second, which end up here in Hour and Second. What we want to do is extract those so that they're assigned to constants that you can import.

We'll start in our reducers. You could actually put these anywhere, but for now since they're closely related to our reducers I'll move them here. I'll say const hour is...all upper-case HOUR, just as a convention, and const second is all upper-case SECOND. We need to export both of those so that we can export them into our app file.

Then instead of second here, we're going to say second. Just say hour. Then switch over to our app file. We're going to go ahead and import from the reducers. The second and hour. Now we can just use those in here as well. We'll take hour, second. Now when I save and hit Refresh, you can see everything works the same. It's incrementing by seconds and then when I click it's incrementing the hours.

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