This course has been updated! We now recommend you take the React and TypeScript, v2 course.
Transcript from the "Reducers Solution" Lesson
[00:00:00]
>> So let's get a version is kind of working. Some of this is going to be a little bit what we saw before, but let's define our type. Let's say the type is a counter action. And the counteraction is gonna have a type of, let's say increment decrement cool and say and we'll say the payload.
[00:00:36] Payloads interesting this one, right. There's a bunch of ways you could go about this. You could say that when they hit increment and decrement, it will dispatch a payload that is a number of one. Right? We can start with that. But we know no is a counter. No is a strong word, but let's say hypothetically in our current use case increment decrement Increment by one and decrement by one, so I like having to put one in every time it'll work.
[00:01:09] But then I could just get down to set. So let's try something here. Let's say the payload is optional right? If you're gonna set it to a different number, yeah, like you need to give us a number to set it to. However, if you're gonna increment decrement, we're gonna like change it by one, it's gonna be fine.
[00:01:30] Cool and we'll also say that the type of counter state is a value of number. All right, so we've got that in place a reducer gonna be pretty straightforward as well. We'll say the state is counter state and the time of an action is counter action. All right, and I'll use a switch statement this time just to change it up.
[00:02:06] I understand that switch statements are common for reducers I for some reason, just like conditionals that's my personal taste will say in the case of increment will return, They will even like return instead return will return value is state.value, plus one fun fact about how decrement's gonna work.
[00:02:45] And then set will actually figure out what the payload is and we'll kind of see something interesting here as well. So, now that needs to be a call. All right, and we'll say the set is return value. And really, it's not even like we're just setting it to numbers it's really gonna be we'll just say it's like action dot payload like whatever the person right that'll be good Return, hold on, Cool.
[00:03:34] Here, our concern this could be undefined. Right. And especially if I did something like let's say actually wanted to add it for some reason, right, you could see we're types. We've got a little upset here. Because maybe it's like eventually one is like increment decrement by a certain amount.
[00:03:51] And, well, in this case, like it's like, well, this could be undefined and it's yelling at me about things. And that's kinda interesting. And like, I don't love this so far, but, we'll go ahead, and we'll say that, it's just action.payload for now, or return state. All right.
[00:04:17] So in our counter we will grab Our state and our dispatch it's gonna be usereducer. I'm going to be a reducer. And again, like I could pass in like something I explicitly defined as counter state, but as I demonstrated before, as long as it fits that type, TypeScript will be okay with it.
[00:04:49] What are you angry about? UseReducer without action. Maybe it's not, let's see. UseReducer should be fine. Maybe the message. Any I don't want any reducer. Cuz it couldn't return a number or undefined. That's interesting. Let's see what happens if I actually typed the state shouldn't be an issue but we'll find out probably missed something small.
[00:05:35] And someone noticed I need to change decrement to minus one. So before I get that. One of the other questions is can I use an enum for this type scrip has an idea of enums. In like my opinion, like it's a little bit of an anti pattern because they add a lot of complexity and abstraction and I don't think is super helpful, right?
[00:05:54] Like an enum is basically a value. It's like it can be one of these three states. And those states under the hood become numbers and you kind of change them to something else. For me, I think that the kind of having the union types makes more sense. I when I first learned TypeScript, I was like, enums is cool I like enums.
[00:06:12] And then every time I stopped using enums have somewhat regretted it. All right, so we change that to minus one. Thank you for chat for helping me there. But let's say a state is kind of state action is counteraction. We'll deal with it in a second. I'm not quite sure what the issue is yet, but we're gonna push forward a little bit we'll see if it resolves the issue.
[00:06:39] All right, so then let's make some helper functions for ourselves. We'll say we've got this idea of increment. It's going to Type off. Any six or dispatch. Should work. It's actually, it's over here where I kind of winged it for a little bit where some of the issues are coming up.
[00:07:21] But I can say, I'm interested in this. This is somewhat fascinating to me. Which is, if I just have increment and decrement, which are these places are just, they're not dealing with the payload at all. Everything works. It's things that a little squirrely with me when I just use the payload like this.
[00:07:45] I have a hypothesis which is an do this and my hypothesis is because this could be undefined. It has confused everyone in everything. Which one because value could now be a number or it could be undefined. And I think what happened was tie feels like, it could be anything, right?
[00:08:10] Now saying that either it exists, or zero I guess that could be falsie. But like since it defaults to zero, I'm not super worried about it. Everything comes back to normal again. It's like okay, no matter what value is getting set as a number everything makes sense in in the world again.
[00:08:29] That's pretty cool. So interesting little deviation there. But yeah, again, TypeScript is trying to help you if you confuse it, and it can't figure out what's gonna go on deterministically It's starts to be not okay and refer like that's a that's a fair bug that we would have solved if we kept going forward.
[00:08:51] But like, I definitely see a world where it makes sense that like that was brought to our attention pretty early on because like yeah, like, this isn't my first time doing this exercise so I knew that we were gonna see it through but if I was just writing code like I got a ticket.
[00:09:07] I was just working on stuff I might not know that like eventually everything was going to be okay just yet. So he will make a decrement As you can even see, as I was typing it as I type got a little upset there for a second. It's like that.
[00:09:23] It's not either increment decrement or set. And here we'll actually just say that reset is going to just set it to zero, all right. So I'll just say it because I make a point with that later, and this case it will take some number and N it's gonna be that number.
[00:09:43] I'll fire it off to set with a value or payload Of 0. Right? Everything's happy right now. Cool. So now we can go ahead and we'll say that This will be reset. So here we'll say, make two just to make a point in a second. I don't use one, we'll use reset, where it's gonna be hard coded and one that we pass in.
[00:10:22] All right, nothing special here. Increment, Reset, Decrement. All right, we've got a working. Now let's make sure we haven't. We're gonna set some buttons. We got actually put that state of value in there because even just change it in the hood if we were hard coded as zero is not gonna work.
[00:11:01] Cool. All right.