Transcript

Kent C. Dodds 1: 0:00 All right. State reducer's probably one of my very favorite patterns. I love the state reducer pattern. It is super powerful, a great implementation of inversion of control.

0:11 Here, I'll give you a little bit of the background around the state reducer pattern, what it's useful for -- I have a blog post that you could go read up on -- and then a real-world project that uses the state reducer pattern. That's downshift. That's where I created and codified the useState reducer as a pattern. It was within downshift.

0:31 Now, downshift is a component that implements the state reducer pattern, and we are going to be implementing this within a hook. This is one that you could implement in either/or or both, depending on the use case.

0:43 For the exercise, we're going to be making it possible for somebody to build this kind of UI, so I click, click, click, click. Finally, when it gets to, "Whoa. You clicked too much," I shouldn't be able to click anymore until I hit reset. In the final version, that's exactly what happens. I can't click anymore until I click reset, and then I can click some more.

1:04 Your job is to make that work. Definitely don't skip out on the extra credits here because we've got a couple here to make the state reducer pattern a little bit more useful. Have fun with this one, and I'll see you on the other side of the exercise.