This course still contains valuable patterns in React, but doesn't cover React Hooks introduced in React 1.16.
Transcript from the "State Reducers with Change Types & Exercise" Lesson
[00:00:00]
>> Kent: Still on the eight exercise on the usage, so here's my toggle state reducer. What if certain things like, in downshift for example, it's a drop-down component, state can change in many different ways. The user can click on the drop-down arrow that'll open it up, that's one different action.
[00:00:20] User can start typing, that'll open things up. The user can select an item that'll close it. There are lots of different interactions, and lots of set state calls internal state set calls that happen. And if anybody wants to use the toggle state reducer effectively, they need to know what is causing the set state change.
[00:00:39] So if I want to make it so that when a user starts typing into the input, it doesn't actually open the menu, then I would need, inside my state reducer, I need to be able to say check some sort of type that says, here are the changes. And the reason they are changing is cuz the user's typing.
[00:01:01] And if that's happening, then I say, no, I don't want this is open to be true, I want it to stay false. So there are lots of use cases, different situations where you actually want to control the state. But only when the state is changing for certain reasons.
[00:01:18] What our next exercise is all about is providing a type for your state changes so that this reducer knows why is that thing updating. So that is in exercise number nine.
>> Kent: And all of your changes are actually, yeah, [INAUDIBLE] will help you know where you need to apply changes.
[00:01:50] And, yeah, you'll notice, and the implementation actually if you look at this. Once we get to clicking too much, we render a Force Toggle. And that will continue to allow us to toggle, even though we can't toggle on the input. We can click this force toggle to force it to toggle despite the fact that we clicked the toggle too much.
[00:02:16] And so this new type allows us to do that, and so that's yeah. That's the use case that we're trying to solve for, and the implementation of that code we have the toggle state reducer. Changes has a type property on it now. And if the type is forced, then we'll do the changes, and that forced is coming from ourselves here.
[00:02:37] We have the Force Toggle, we call toggle. Sorry, this is a little bit confusing. Rats, the naming is unfortunate. But what you could actually call this is like toggleutils. That's what it should be called. So you could open a pull request and fix that just so it's less confusing.
[00:03:00] Yeah, so toggleutils.toggle and we're gonna pass a type. And then that type is gonna be wired through to our changes here, okay? So we know, this is forced type, so we'll continue on with the changes. In addition, each time you call internal set state, you should also pass a type in your set state call so that I could be aware in my state reducer.
[00:03:28] This is the reset type, so that's cool to change or whatever else the case may be. Okay, any questions about this one? Okay, we're gonna do 15 minutes for this, and yeah. Actually, let's go ahead and get things started here. We'll swap those. I'm gonna actually reset hard just to keep things nice and clean.
[00:03:56] npm t to start up the test.
>> Kent: And you should be good to rock and roll.