React and TypeScript

React and TypeScript State Management with Context

This course has been updated! We now recommend you take the React and TypeScript, v2 course.

Check out a free preview of the full React and TypeScript course:
The "State Management with Context" Lesson is part of the full, React and TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates how to move the state management into a Context and resolve some of the errors thrown by TypeScript. This example uses an interface as opposed to types to illustrate the different syntax.

Get Unlimited Access Now

Transcript from the "State Management with Context" Lesson

>> This gets a little bit trickier, however, when we think about the piece with state management. Because the paradox that we have to solve for with TypeScript is you cannot create like a set, if you use, you state, you can't create the like setter outside of a component.

[00:00:22] You can only use hooks inside of a functional component and you can only create your context outside of a component, right because you can't export anything from inside of component. So, create contacts needs to get called outside of a component but if you want access to dispatch, or if you want access to set name or set whatever the US state is that you're setting like you can only do that inside of the hook.

[00:00:50] Which the conundrum that creates for ourselves ourselves is, by definition, we are not going to have all of the information TypeScript needs when we create the context to make it happy. And there are three ways that we can solve for this, we'll do two now, one at the very end of this course.

[00:01:11] I'm gonna argue that the second is probably our best choice, but the it's like one of those things, the third is the correct choice and the second is the best choice. We're gonna look at different ways to solve for that problem in TypeScript and react. So let's make a new one, I'm gonna call this one just I'll call this one context TSX.

[00:01:28] This is the kind of the more real one, it has what we already have that file in here. So we've got context TSX, right now it's an empty file. And again, the state in this application is red, green and blue values that's effective was passed all these inputs, it's a fact of the past is color swatch.

[00:01:49] It is so we can define that right now there is an RGB color type that we can use. And so what we can do is we can do import. RGB color type, and we'll bring that, from dot slash types. So one thing to note that we haven't really seen before right now is that you can import and export types just as you would import export JavaScript functions or objects or primitives and stuff along that it works the same way.

[00:02:25] It all gets stripped out of your code because TypeScript is not necessarily. Is that without running TypeScript in the browser where JavaScript is coming out the other end, this is kind of a compile time check, but you can import and export things and kind of pass them around like that.

[00:02:40] So I pulled in this color type, which is an interface actually, which again, for our purposes, there's no practical difference in the in how we're using them, like that's not to say like we looked at the chart earlier. There are differences, but for our use case, I chose to use interfaces one just to demonstrate some of the how the syntax can be a little bit different.

[00:02:59] And so the RGB color type is simply if we go and click on it or you actually hold command and see it as well. It's red, green and blue and their numbers I'll just show you that again. As you can see, you can kind of see it if you, if you hold him out.

[00:03:16] All right, so really all that our our state is gonna be for this context API is those three values plus dispatch. And so if I go into my reducer, there's also before we made those counter actions and the calculator pizza actions. If you go into the reducer, you can see I have this idea of an adjustment action as well.

[00:03:38] So we know what it's gonna dispatch, and we saw before that the type is gonna be dispatched with of the actions it expects to dispatch. So, we're gonna run into the problem with the fact that like, I will not have this when we just define the context and that's what we're gonna try to work around.

[00:03:54] But let's at least get to the point where we can say interface is RGB context type. Now we'll extend this RGB color type. So the red green and blue plus dispatch should be react dispatch, adjustment action. All right. So what I would normally do at this point is I would pass in the red, green blue default values plus the dispatch function.

[00:04:34] So, I could use it throughout my application, but as I kind of mentioned earlier, one of the problems that I have, is I can only create dispatch inside of a react component using hooks. And I can only create my context outside of a reaction point where I can't use hooks.

[00:04:51] Which means there will be a brief moment in time where I don't have dispatch yet even though TypeScript is expecting that as part of that object. And that is gonna be what we have to try to deal with. So at this point, we will export this constant of RGB context that's gonna be this react create context.

[00:05:14] And I don't really have anything to pass in there yet, it's like a pass it no. And if you remember from our use state example before you can see like kinda where this is gonna eventually lead us, but we'll deal with that when we get there. So yeah, I could put in what type it should be in here, I'm gonna get yelled at but we do know if we're being fair, we do know that it is this RGB context type.

[00:05:44] Right, and now it's angry cuz Nelly is not something that conforms to that type, like I said, we will deal with that momentarily. Let's actually get the provider up and running again. So RGB contacts provider. This point will have children and children is gonna be of the type, react node.

[00:06:19] And what that's going to do is we'll this is where we'll get to use our use reducer, and we're gonna get our RGB. In fact, it's actually the colors in this case, yeah their state is simply RGB, and we'll have that dispatch as well. And that will be react, use reducer, pass in the reducer that will auto import from that file.

[00:06:49] And we know that this reducer is expecting RGB color type, I can define one explicitly or as long as it conforms to the value as we've seen before, red, green, and blue. I don't have to say like, as long as testing can confirm, it's okay, I don't necessarily have to tell it anything.

[00:07:12] Neat, and then we'll just return RGB context dot provider Children And it wants a value, I get my curly brace there. It wants a value, and we'll give it three colors, plus dispatch and I gotta add a second set of curly braces there. All right, so we've got all of that in place, I probably made a boo boo somewhere over here.

[00:07:52] Let's see, X are not const there we go. And we've got that ready to use, and so now we can just wrap it in index as well. Crop, and so now that's available for us, and we can pull it into color sliders and color swatch. I'm only gonna worry about the sliders for now, I'm gonna deal with the input fields in a little bit.

[00:08:36] So for the sliders, we're just gonna say Instead of passing all these items in, we don't really need to pass anything anymore. Now we can not because we'll get it off in the context, I'll delete that in a second though. Colors will say red, green and blue, dispatch will equal use context.

[00:09:02] Give it the RGB context. Cool and those are w defines, we'll just get rid of those as well. And we've got all that in place, and we'll get something similar here for the color swatch, which will need it as well. I don't need dispatch in this case. All right.