Dispatch Action Types to Reducers

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

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.

[00:00] 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.

[00:15] 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.

[00:40] 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.