Default State Reducer

[00:00] So we want to get rid of all of this duplicate logic that shows up in our ToggleReducer. So if we go over to the ToggleReducer right here, we're going to export this. And that will allow people to import it and use it directly as they so please.

[00:15] So if we come back over here, we can import the ToggleReducer and handle that here. So what if we just delete all of this, this duplicate logic, and we're going to return ToggleReducer from Toggle. There's our state and our action. TypeScript is happy with that.

[00:32] And in fact, if we save it right here, then we're able to reuse all of that same logic. Everything is working as it should. And so now we can just add our additional logic on top of that. So we can say if the action type is Toggle and they click too much, then we'll skip calling the ToggleReducer.

[00:50] We don't even need to bother calling it. And all is well. And if we wanted to, we could say, hey, actually, like, some things are okay. And so we could actually grab our state, move this up, or I guess we'd call this the new state. Here we go.

[01:08] And then we'd say, I'm fine with all of the new state that you would want. But for my state, for the on state, I'm going to have that be the same as it was when it came in. So I'm going to override the new state. Otherwise, we'll return the new state.

[01:24] And that also works. It gives us so much control over how we operate our component and or the particular hook, because anytime a state change is going to be made, we can control how that state change happens or if it happens at all.

[01:42] This, I think, is a pretty cool pattern. Definitely gives you a lot of power. So there you go. That is the state reducer pattern. Awesome work.

[00:00] So there's something that doesn't quite sit right with me, and that is that the users of our use toggle are basically re-implementing most of the logic of our toggle reducer. And our toggle component's not all that complicated, but if it was really complicated, then there's a lot that they're gonna be re-implementing themselves,

[00:17] and just not a super fan of that. So the solution's actually way, way easy, and that is what you're going to be implementing in this exercise. Being able to share logic is, you know, tale as old as time in programming. So you're gonna export the toggle reducer and then use it directly in here. That's it.

[00:37] That's the solution. Spoiler alert. So have a good time with that. 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

Default State Reducer

Transcript