This course has been updated! We now recommend you take the React and TypeScript, v2 course.
Transcript from the "Adding Counter Action" Lesson
[00:00:00]
>> Now, the thing that I want to solve for this is literally the thing that just kind of bit me for a second there. Which is payload can sometimes be there. It's really only something we're gonna use on set or in this case, reset, but increment and decrement don't needed.
[00:00:17] And this can be a little bit tricky. Now, what would be really great if I could tell TypeScript that, hey, if it's increment or decrement, I don't need payload. But if it's set, you got to give me a number, right. Because just saying this wasn't enough for TypeScript, you can see everything blew up.
[00:00:44] Because it's cool, I don't since you said the number was optional. I can't promise you that will be a number. However, you told me that counter state demanded that the value be a number, but I can't promise that I'm gonna set it to a number on that line of code.
[00:01:01] Thereby I can't confirm this code is going to work the way you think it's going to work. By saying it's either gonna payload is undefined. We'll make it zero. Really also if it's a false value is going to become zero. But since zero is the only false number, it works.
[00:01:24] Now TypeScript can actually do everything but it'd be interesting to say all right, increment decrement don't need a payload at all and shouldn't have a payload and set should definitely have a payload. And it should definitely be a number not an optional version. We can do this and what we're gonna do here is we're just have and this kinda goes to the question I got a little bit earlier.
[00:01:48] I'll just write this along with everything else, and say basic counteraction. And that's just gonna be our increment or decrement, right. And so this will be type. Increment. Decrement, those are fine, and we're gonna say that the type of let's call it a set counteraction. Has the type set and semicolon and this one has a mandatory payload of a number, right.
[00:02:29] And so now instead of a counter action, and we could even say the counter action was either one of these. And in fact, let's do that. Just comment out this one. And we'll say that the type of counter action so this reducer will now accept either the basic counter action or the set counter action, so it's either take an action has a type of increment or decrement.
[00:02:56] Or it's gonna take an action has a type of payload or type of set which point it demands to have a payload. Which means we don't have to have that fallback in our code, because types won't let us write code that could have an edge case. Some kinda action in here.
[00:03:16] Now we can go back to the code that we had. Right, I don't have to default back to zero because there is no world where we hit the case of set. We don't have a payload. And just to kind of drive the point home, if I forget the payload and set, it's not gonna have some weird edge case where it becomes undefined and I don't understand why my code isn't working.
[00:03:41] It is literally just not gonna let me write that code. Similarly if I said here. It won't let me include a payload and increment or decrement. So again, is adding that safety and showing TypeScript the intent of my code, right. If you say set, you better give me a payload.
[00:04:01] If you give me a command document, I don't even need a payload. And now I don't have to write code that does a fallback cuz our code is, typos not gonna allow those edge cases. I was originally coding around. So we can kind of see that again, if we can help the type system out.
[00:04:16] And this is also like in a large enough code base, there is you're gonna use the code you write but other people gonna use the code you write. And case of bugs a lot of times is like somebody six months now. Didn't understand what you were thinking six months ago when you tried to solve that issue and they tried to, they used a little bit differently.
[00:04:32] They didn't understand that they made a mistake. Sometimes that other person is just you six months from now, that doesn't remember the code that you wrote. So in this case, we've now added some extra type safety and a little bit of sophistication in our types to make sure that lots of little edge cases can't get hit anymore.