This course still contains valuable patterns in React, but doesn't cover React Hooks introduced in React 1.16.
Transcript from the "State Reducer Change Types Solution" Lesson
[00:00:00]
>> Kent C. Dodds: All right, so let's do this exercise nine, leaning about state reducers and types. So I'm gonna run the test.
>> Kent C. Dodds: And cool, let's jump into this exercise. So we want to add a type to the changes objects that we passed. So that's simple enough, because the changes is what we get from internalSetState.
[00:00:29] So here, I'm gonna add a type. And this will be, we'll call it reset.
>> Kent C. Dodds: And we'll spread the rest of those. Whatever in on internalState, we'll just add this object design thing to have the type reset. And then we'll also add a type here for toggle. Really, it doesn't matter what you call it.
[00:00:53] I'm gonna show you a slightly better way to do this here in a second. But yeah, just adding these types to the state that we're setting. Let me get rid of Cody the Koala here. Now when we call toggle, we actually want to, let's see,
>> Kent C. Dodds: Yeah, this is where things are gonna get a little bit more complicated.
[00:01:22] Cuz down here we're calling toggle with the type, because we wanna have our own custom type, so we can key off of that as a user. And so up here, toggle needs to be able to accept an object. And so this is gonna be an object that defaults to just an empty object, and then it will have a type.
[00:01:43] And we'll just have that default to toggle, then we can actually use that instead. Okay, cool, so now we're passing this type into our internalSetState. And we don't actually want the type to be part of state. Because updating the, let's say that we call SetState, but we're not actually changing any state, but we change the type.
[00:02:08] That's gonna cause a re-render. It's totally unnecessary if none of the actual states change. So let's keep type off of our state, and we'll just pull it off. So we'll say type, and I'm gonna call that ignoredType. And then we'll pull the rest of those changes. So remainingChanges, and that will be reducedChanges.
[00:02:32] I can't remember what I called this, but remainingChanges is good.
>> Kent C. Dodds: Okay, cool, and then what we'll process is the remainingChanges rather than the reduced ones. Okay, and that passes everything.
>> Kent C. Dodds: What questions do you have with those, with this exercise?
>> Kent C. Dodds: Clearly many [LAUGH]. Okay, I totally forgot, we didn't do our air squats.
[00:03:06] We'll do that after this exercise. That explains it.
>> Speaker 2: [LAUGH]
>> Kent C. Dodds: That's why you're all so tired looking. We didn't do our exercise. Okay, so one thing that I wanna change about this is, any time I have something like this where I'm using a string to key off of some type or something, I like to simulate an enum in JavaScript.
[00:03:28] Which we don't really have enums, unless you're using TypeScript, but I like to kind of simulate that. So what I like to do is, I'll add a static stateChangeTypes. And then I'll have toggle as one type. And I'll just call that toggle. Whatever you wanna call it, you could, it doesn't really matter.
[00:03:51] That's the nice thing about using enums, is it doesn't matter what the value is. And then reset.
>> Kent C. Dodds: And then instead of saying type is reset, we'd say Toggle.stateChangeTypes.reset. And then the type here will be Toggle.stateChangeTypes.toggle.
>> Kent C. Dodds: Cool, so one other thing that I just realized, that I guess I don't have a test for, because I forgot to do this part.
[00:04:35] But now when I click on, oops, there's my Twitter. Where'd my thing go? There you go. When I click on this, it is going to be passing the event to the on toggle function. So we're gonna callAll onClick, and then this.toggle with the event. And we're gonna pull the type off of that.
[00:05:01] So it's not quite right. So what we're gonna do is, instead we'll provide a function that calls this.toggle, and then we'll accept the default.
>> Kent C. Dodds: So we're not passing something unexpected. Okay, and that's it. So the one other nice thing about using state change types instead of just strings, is because now you can actually add that to your documentation, say, if you want to change state based off of certain actions and use Toggle.stateChangeTypes.
[00:05:34] And then we could say, if changes.type = Toggle.stateChangeTypes.toggle, then we'll return (on: false). And now we can never toggle it on our test break and stuff. And so it gives the consumers a lot of power to be able to know, okay, I know that the state is changing, but I don't know why.
[00:06:01] Well, now we know why, because we have this type. And then we can key it off of stateChangeTypes. And then people could also console log stateChangeTypes. Or you could add flow type or type scripts to inform people what's available, what types of changes can happen.
>> Kent C. Dodds: So Adrian asked a question in the chat.
[00:06:27] I've got to get rid of this thing. Right up here, asking if there was a reason that we destructured on this new line rather than just right here. Not really, we could just do that just as easily. It'll be effectively the same. I just kept it separate so you know every single step of what's going on.
[00:06:52] With the map function thing, I think it looks so much cleaner. But yeah, you can do it however you like that. Feel free to do all sorts of things. Let's just combine this right there, we'll just get rid of that. Yeah, that's what's I'm talking about. Come on, prettier, thank you.
[00:07:13] Yeah, prettier can't make ugly code look pretty. It's just, it is ugly, so.