Dispatching actions with useReducer - React.js Tutorial

- [Instructor] Another pattern you can use with useReducer is to define a list of actions and then dispatch them in the component. So this will look a little different. We'll first start by adjusting our component. So inside of this component, we want to return a Message and we want this Message to display whatever the state of this message value is. Inside of the useReducer function, we're going to scaffold this to say a couple different things. So it's first going to take in the state. And then it's going to take in this method called dispatch. Then useReducer will take in a reducer and an initialState. So we'll define these outside of these parentheses. Now, the easier part of this to define the initialState. So let's go ahead and do that. The initialState here will be a message that says hi. So once we've created an initialState, that'll be passed into this function. Then we're going to go ahead and create a reducer. A reducer takes in state and an action and then it returns a new state. So the way that I can define which state it should return is with this switch statement. So the switch statement is going to take a look at whatever the type of the action is. This means that we can define the list of the possible actions that we could dispatch. So just think of an action as being like some sort of an event. We're going to send a yell action. And the yell action should return a message that says HEY! And we're yelling so all caps. Then we can specify a case for whispering. This time we'll return another object. Our message is excuse me. Very polite, very quiet. Now that we have our reducer defined, our message is displaying here, using our initialState. But what I'm really here to do is to try to dispatch some actions. So let's scroll down. We will add some UI elements that we can use to trigger these changes. So we'll say YELL. And here we're going to say onClick equals and again, we're going to dispatch an action of a specific type. And the type of action we want to dispatch is YELL. So this is what that'll look like. Type yell. There we go. And let's create another one of these buttons. It'll look pretty much identical, except it should say whisper. Let's make it all lowercase 'cause it very quiet. Then we'll say whisper. Inside of the action, and now I can say whisper and it'll say excuse me. Now, the reducer function takes in the state and an action and returns a new state. And while this is working okay, the real benefit of having access to that previous state is so that we can use it. So if our new state relies on the old state, this is a really good pattern to use. So I'm going to change this message to a template string and I'm going to say HEY! I JUST SAID state.message. So this is going to display whatever the previous state of message is. So now if I click on YELL again, it'll say HEY! I JUST SAID hi. So similarly, I could do the same here. So we could say excuse me, I just said state.message. So now if I click whisper, it should show me what the previous state was. So this can be really useful in calculations or checking in with the previous value to make sure that you're returning the new thing that's correct but this is what a reducer is for. It takes in the state and an action and it returns a new state and any time our state starts to become a little more complex, we can reach for useReducer to help us out.