State Reducer

[00:00] So we've got our quick too much that is being managed for us So we don't need to worry about that so much. We just need to have a reducer function that will handle Updating the state appropriately when we've clicked too much. So say a reducer and we've got our state and our action and

[00:16] We'll switch on the action type. And yeah, if it's toggling then we'll return that if it's reset then we'll return the initial state But we want to handle the case if we've cooked too much then let's not bother with that stuff so if clicked Too much then return in the state Perhaps we want to only do this when we're toggling though, right?

[00:36] Because if we reset we need to be able to actually reset so let's put that down in here And there we go. Great now typescripts not super jazzed about this because we haven't actually implemented this yet so let's dive into the use toggle and we're gonna say our

[00:51] Reducer defaults to toggle reducer and now instead of toggle reducer. We'll just use reducer. That's it There it's actually a lot. It's more straightforward certainly more straightforward than it used to be. Believe me. It was awful before But yeah, you just accept a reducer and use that instead of your built-in reducer

[01:12] So now as I click no, I won't click anymore until I reset and then I can reset at any time. I like and It's working super great So that is the state reducer. The idea is when an event is dispatched then instead of Calling our own reducer. We're gonna call your reducer and you're in charge now and

[01:32] That allows that inverts control now something to keep in mind Is that this means that you're exposing your states and your actions to? The external world and so this now becomes part of your API Which does mean like breaking changes are more likely if you want to refactor and stuff So it is not something you want to just do everywhere

[01:54] But it is an extremely powerful API and it drastically reduced the number of Requests for special one-off features that I would get in downshift. And so definitely a super fan of this particular pattern But yeah, it does kind of open up your internals as being part of your external API. So you want to keep that in mind?

[02:16] But there's a couple other things that I'm not a super fan of so let's keep going

[00:00] Our toggle has a new feature. Check this out. Every time I click it, we're going to keep track of how many times it's been clicked. How neat is that? But then, once you click it four times, it should say, well, you clicked too much, and it shouldn't allow you to click any more until you reset. And then you'll be able to click some more until you reset again. So right now, the functionality doesn't work, though.

[00:19] I can click as many times as I want. So your job is to make it so that that works by implementing a custom reducer. You're going to have to do a little bit of copy-paste that we'll fix in the next step. So don't worry yourself too much about that. But go ahead and give this a whirl. Add your own reducer so that you can handle clicking too much.

[00:38] You just want to return the original state. If they click too much, it's a spoiler alert. But have a good time with this, and we'll see you when you're done.

Make your code better than ever by learning the strengths and weaknesses of several advanced patterns.

**After taking this workshop you'll always know exactly what patterns to reach for.**

Running into prop drilling? Reach for some composition patterns.

Are the values you need stale? Use latest ref.

Are you a library author who wants to make a component more flexible? Use the control props or state reducer patterns.

Learning the following patterns will take you far!

## Composition

Avoiding prop drilling is one of the reasons so many people have jumped onto state management solutions like Redux.

In this section you'll learn what you can accomplish just by passing react elements rather than treating components as uncrossable boundaries. 

You'll see how things get quite a bit easier without losing any flexibility!

## Latest Ref

Sometimes, you need to make sure that you are getting the absolute latest version of a value. 

Here, you'll learn how to use the useRef hook to store a value and avoid issues with stale closures in your hooks.

## Compound Components

This pattern can actually be seen in HTML with the `<select>` and `<option>` elements. 

Instead of loading up props with data and trying to build the UI inside the component definition, you will instead learn how you can compose several React components together in the compound component pattern.

## Slots

This flexible pattern is useful for creating reusable compound components that aren't locked into having the same parent every time. 

Slots allow you to specify an element which takes on a particular role in the overall collection of components. So a parent component can have many props available to children with various roles. 


## Prop Collections and Getters

The Prop Collections and Getters Patterns allows your hook to support common use cases for UI elements people build with your hook.

Basically, in this section you'll learn how to create a function that can return props!

Note, the prop collections pattern isn't recommended but it'll be useful to learn since the getters pattern builds on the idea. 

## State Initializer

The state initializer pattern is a way to initialize (and reset) the state of a component in a predictable way.

This pattern is simple but you'll learn that there's a catch if you want to truly ensure that a component is reset to its initial state and ignores any changes made to the values you used initialize it.


## State Reducer

This one is especially useful for library authors.

In this section you'll learn the State Reducer Pattern, which 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.


## Control Props

Sometimes, people want to be able to manage the internal state of our component from the outside

Learning this pattern will allow you to give control of a component's state to its users so they can make state changes to it themselves. 

Make your code better than ever by learning the strengths and weaknesses of several advanced patterns so you always know exactly what to reach for.

Advanced React Patterns

Advanced React Patterns

Transcript

State Reducer

Transcript