Traditional Reducer

[00:00] So this time, I'm actually not going to change this right away because we're going to be moving this logic. So I want to handle those use cases first, and then you can see how we just are moving logic. So our action is actually going to be pretty different. It's no longer going to accept the state at all.

[00:16] And instead, it's going to have two different types. We'll have type increment and type decrement. I think in the example before, I had this all caps, and it doesn't really actually matter. It's just some very defined value there

[00:33] that's unique across all the different action types. So in any case, each of these is going to accept a step. So the amount that we want to have incremented or decremented. Now, we need to update our reducer to handle that action type. And so let's come over here.

[00:51] And actually, I'm going to multiline this thing. We don't want to do this all in one line anymore. So we're going to switch on the action type. I'm going to actually grab the type and the step from the action. We'll switch on that type. And for our first case, we'll go with our increment case.

[01:09] We're going to return a merging of the state that we had, like we were doing before. But then our logic that we had before, that's going to come up. So we'll come here, say count is whatever the current state is. So state.count plus the step. So we're taking all of the properties from state,

[01:28] merging those with our count. Now, again, our state just has a single value or property in this object. But merging these states together is pretty typical. You're going to have multiple elements of state. You're like, yeah, I don't care about the other ones. Just keep them along. Here's the one that I'm changing,

[01:48] or here are the couple that I'm changing. So that takes care of increments. And then our AI assistant can probably help us with the rest of this one. We're going to take that logic that we had down here, move that up here. And now, with this, we don't need to worry about the default case, because TypeScript is saying, hey, it could only be increment or decrement.

[02:07] There's no default case anyway. So we're not going to even bother with that. OK, great. So we've got our count reducer, which I'm going to change to a named function, since we're not doing an immediately returned function or an implicit return arrow function.

[02:26] I just like function declarations. Sue me. And now we're going to change set state to dispatch. And now, instead of having this logic right here, we're just going to say the type is increment. And here's our step. And we'll do the same with this. Type is decrement.

[02:48] And here's our step. And so now, there's actually no logic going on in here. We're just passing an action. And all the logic resides in our reducer here. And so that makes it really easy to debug. Like, why is this happening? Who is dispatching these events? You put a debugger in there. You can step back.

[03:07] Yeah, all of this stuff can help a lot as we are building increasingly complex components with increasingly complex state management needs. Having these actions spelled out and the different cases

[03:26] handled makes this really nice. If it gets really complicated, you could test this in isolation. I've never actually done that, because once it gets that complicated, I'm usually using xstate. And then it's a totally different thing at that point. And you're testing that in isolation and stuff.

[03:43] But some people do like to be able to test this in isolation. And I can appreciate the value there. And yeah, you definitely can do that. So there is your typical reducer. You've got your state. You've got an action with the type property. But you know that there are so many other ways that you could write this reducer. And so your brain is unlocked.

[04:03] And you can write however it makes the most sense for what you're building.

[00:00] Alright, now it's finally time to get to more of the traditional conventional reducer that most people are writing. So here's the API that we want to support. We're still doing the object form because typically your reducer is going to be managing an object of state, multiple elements of state on there.

[00:16] But our updater function is now called dispatch. And the argument that we pass to it is an object that has a type property as well as any other thing. Sometimes people will add another property called payload and then put additional information in there.

[00:34] I don't bother with the payload thing. So we've got our type, increment, and then step. And so then what's cool about this is now we can move all of our logic about what it means to increment into our reducer function. And we can have all sorts of different things that we do inside of our reducer function

[00:52] based off of the different events that we're dispatching or these actions that are being dispatched. So that is your objective is to bring us a traditional reducer. Let's go.

Advanced React APIs covers many of the React APIs that you might not see on a day-to-day basis but you will need these in your toolbelt for certain scenarios that pop up.

We'll take a tour of several advanced hooks and React API, their use-cases, and when to use them. 

These will include:

- useReducer
- use
- createContext
- useLayoutEffect
- useImperativeHandle
- useSyncExternalStore
- flushSync
- createPortal


## Complex State Management

First we'll dive into the deep-end of state management with `useReducer`. This hook comes in really handy when you feel the logic in your components is a sprawling mess and you'd like to consolidate that into a single place with a nice API to interact with. 

We'll get into some state optimizations as well as how to make your logic easily sharable throughout your application with custom hooks.

## Context

While context is often times something you will leave up to library authors, there are some cases where you want to expose values you need throughout your application. We'll build a context provider that will expose search params to our components on a blog search page with `use` (previously `useContext`) and `createContext`.

You'll also refactor this code to expose the context you create in a custom hook that will give us nice error handling when context isn't set up correctly.

## Portals

React gives us `createPortal` to render UI outside of the DOM tree structure that a component might sit in. This is useful for UI elements like modals or tooltips. We'll explore how to attach a tooltip to the `document.body` to ensure it's positioned where it needs to go.

## Layout Computations

If the logic that you are working with in a `useEffect` affects the how the UI looks, especially on first render, you'll want to `useLayoutEffect`. You'll work through an exercise where the client makes calculations on where to place a tooltip before rendering and see the difference when this is in a `useLayoutEffect`.

## Imperative Handles

`useImperativeHandle` is an escape hatch in React that lets you imperatively tell React what to do. This hook is typically paired with a ref (from `useRef`) where we want to expose imperative methods to developers who pass a ref prop to our components.

## Focus Management

`flushSync` is technically a 'de-optimization' because it forces React to re-render whenever you call it. This means you need to be very careful and know what you're doing when you use it.

The primary use-case for this API is focus management. When you have conditional UI that gets rendered based on various state conditions, you can `flushSync` to ensure elements are in the DOM to properly focus.

## Sync Exernal Store

There are some cases where we want to synce our React code with the external world and display different UI based on the state of the external world. This is where `useSyncExternalStore` is useful and lets you subscribe to external stores. We'll also touch on server rendering as this hook supports that use-case.

Learn the hooks and API that React has to offer for complex state management, sharing context throughout your app, focus management and more.

Advanced React APIs

Advanced React APIs

Transcript

Traditional Reducer

Transcript