00:00 When we're talking about advanced state management, there's a place that exists between the really, really basic and the really, really complex, and this is where useReducer sits. So typically, for the really basic stuff, I'm using useState, and actually, I use useState most of the time. But occasionally, things get sufficiently complex

00:18 that useState is not sufficient. So you have a lot of different pieces of logic throughout your component that will set state. Maybe you've got multiple elements of state that are all interdependent, and so that kind of pushes us out of the simple use case of useState. And then there's useReducer,

00:39 which kind of helps us put all of our logic together. Here's everything that can change our state, and here's how the state changes. And the state can be dependent on itself and its updates and things. Then it kind of can get even more complex than that, and that's where I bring in a library like xState, which allows me to model my state transitions

00:57 via state machines, and I really, really like that for really complex things. I have a audio recorder that I use xState for because it's just so much easier to handle all of the different transitions and making impossible transitions impossible, stuff like that. So that is really cool, but there's this gap right here

01:16 between the pretty simple and the super complex where useReducer resides, because it allows us to put all of our logic for updating our state in one place, and it makes it really easy and obvious on how to make sure that your interdependencies between different elements of state

01:36 can be managed nicely. So we're gonna be exploring useReducer in this exercise a little bit differently than you typically do because there's a pretty strong convention, and then there's just the actual API itself, and I want you to have a separation in your mind

01:56 between what the convention is and what the real API is because if you just learn the convention, like the way that everybody uses useReducer, then you're going to be locked into this way of thinking and thinking, like this is how you use useReducer, and you're just limited when you learn the convention. And so we're gonna ease our way into the convention

02:15 because it is a useful convention, but I want to ease you in so that you don't get so locked into what that convention is all about, and you can focus more on what is the API actually and what are all the cool things that I can do with this API. So we're gonna be going with an unconventional approach

02:32 and then ease our way into the convention in this exercise. But here's the basic API for useReducer. So you have this reducer function that receives the previous name, or in our case, it's the previous name, but it's the previous state or whatever the state was before your change that you're about to make to the state.

02:51 And then it receives this thing that we typically call this an action, the action being whatever the state updater is called with. So in our case, we're calling the state updater with the value of the input. But this is typically called an action, and this is typically called dispatch. So we dispatch an action,

03:10 that action gets passed to our reducer. We combine what we know about the previous state with the change that we're trying to make and return the new state. So this is a really, really simple version of a reducer. So the useReducer API itself, you pass the reducer, you also can pass the initial value that you want.

03:30 And there's actually a third argument that you can pass here that we'll explore a little bit as well. And from that, you get the current state and dispatch function. We call this setName and because that's the API that we've created. Again, we're gonna go for an unconventional approach and we'll ease our way into the more conventional approach.

03:49 We're gonna be using a counter to do this. So here we've got our incrementing, we can control the step. So incrementing by five now and decrementing by five. And that is what we're gonna be doing in this exercise is just continuously making modifications to the counter. So the counter will remain the same

04:08 throughout our experience. At least the user experience will remain the same. But the way that we use it as developers, that is what's going to change. And we're gonna use the UseReducer API to give ourselves various different mechanisms for interacting with the state.

04:25 So you can really explore what UseReducer has to offer and the different things that you can do with UseReducer. And then finally, we'll actually be building a UseReducer version of our tic-tac-toe game so that you can kind of get back into, okay, so we've got a counter, but what does it look like really?

04:46 And I think you'll really like it. So let's get into it.