00:00 A while ago, when I was working on downshift, somebody opened this issue, close on selection property, multiple selection out of the box. So downshift is like a enhanced input. It allows you to do selection combo box sort of thing.

00:17 And this person wanted to have the capability to have like multi-selection. So you type in one, you hit enter, and then it leaves the menu open. You can type another, hit enter, and continue until you hit escape. And that's not the default behavior of downshift. The default behavior was you select your item and then the menu closes.

00:37 And so this person suggested, hey, how about we have a prop called close on selection, and then we just update our select item to check if that is set. And if it's not, or if it is set, then we will not close the menu item. And so it's just another if statement, which of course we've all heard before.

00:56 And I've been doing open source for long enough that I said this is not going to end well if I keep on just accepting all these one-off props. And so instead I suggested, hey, how about we introduce this new modify state change thing? And this person believed that this was a good idea

01:15 and ended up adding a new prop. We eventually decided to call it the state reducer prop. And so this allowed you to modify the changes that were about to happen. So we'll tell you, hey, when you are going to make a change, here are the changes that are going to happen,

01:34 and here's why. You feel free to return to me what changes you actually want to have happen. And that's the idea behind the state reducer prop that was added to Downshift and is now in a bunch of other libraries as well. So you can read my article, The State Reducer Pattern with React Hooks,

01:54 to dive into this in greater depth if you like. This talk I gave a while ago is actually quite nice. So feel free to dive in deep there if you'd like to as well. For what we're doing, we're going to be adding it to our toggle component. So I kind of went on a little bit. Let's talk about the one-liner for this.

02:14 The state reducer pattern inverts control over the state management of your hook and or component to the developer using it so they can control the state changes that happen when dispatching events. So here's a simple example. Here's our combo box. The state reducer prop accepts a reducer. Here's our state, here's our action.

02:33 We can say, hey, if the action type is click outside and the state is currently open, then I want you to set the is open to false. So whatever state changes you want. We're going to accept all of the other one, all the other changes that are about to happen, but I want this particular thing to change. And then otherwise it'll just return the state.

02:53 So I don't want to have any differences from what is already there. So that is the idea of the state reducer. We're going to do this in a couple of steps. I think you're going to enjoy this one. So why don't you do it?