State Management with React Context 3 exercises

Creating a Cart Context and Provider

The first step is to implement a Cart Context, which will be in a file CartContext.tsx in the src/app/components/ directory.

Implementing a Cart Context

The CartContext will be a Client Component so we'll start the file with "use client"; at the top. Remember, React Server Components do

Loading solution


00:00 So I've copied the contents of the starting point directory into this new cart context directory, and that's where I'm going to start my implementation. I'm going to start by creating our cart context. I'll do that over in the components directory. Create a new file called cart context. Now, this is going to be a client component because it's going to have context,

00:19 and you can't have context in an RSC. Next, I'm going to bring in create context as well as useState. We're going to use useState to manage the cart. I'm also going to bring in a type of the cart. Now, to make it easy on myself, I'm going to create a custom hook called useCartState. It's just going to invoke useState and create a simple cart to start out with.

00:38 So we need a cart context in order to provide it. In this case, I will use the cart context that has the return type of the useCartState custom hook function that I just created. Now, the next thing that I like to do is create the hook that I'm going to use to access the cart. I'll call that useCart,

00:55 and all we're going to do is just use the context hook, useContext, to get the context from the cart context. Maybe don't find that cart context and we'll just throw an error. Otherwise, we'll return the output of the cart, which is going to be an array that has the cart as well as the cart setter, just a standard output of a useState. And then finally, I'm going to define the cart provider.

01:15 Now, that's the client component that is going to wrap any components downstream, the children, in the provider that's going to provide to them that cart. Now, the really cool thing about client components in the App Writer is that they can transclude

01:31 or project children that are either client components or RSCs, which is really great. Okay, so now that we have our cart provider, we're going to want to go to the layout and actually use our cart provider. So we'll start by bringing in our cart provider, and then within the body,

01:48 we'll wrap the contents within that cart provider. But now, since we already have that cart, do we really need to send it to the header? Well, no, we don't. So we can get rid of it from the header, and then go over to our header, and it'll bring in useCart from the cart context. We'll get rid of it as a prop, and then we'll just get it from that useCart hook.

02:08 Easy peasy. Same kind of thing with our cart pop-up. But in this case, we both need to bring in that cart because we want to display it, but we also want to set the cart based on the output of the clearCart action. So we'll bring in setCart as well. And then down here, we will set the cart based on the output of the clearCart action. Now, we still have an issue over in header.

02:30 Let's go remove the cart here. And I think the last thing we need to do is over in addToCart. We need to bring in useCart. And then all we're gonna use here is that setCart because we're gonna setCart to the output of the addToCart action. All right, let's have a look. So we start off with zero. Now, that's because our cart has zero products in it.

02:52 So that's actually a good sign. Now, let's go into our product, add it to the cart. Now, we can see that it jumps to three, and that's really interesting. So let's go have a look. Well, it did accurately add the ELF t-shirt to our cart. That's great. So why did it get to three? Well, if you look in the server, in our API, our cart API, we have an initial cart setup

03:16 that has two products in it already. So that's why you have three. Once we did the addToCart, we added the ELF t-shirt to our in-memory cart. That gave us three. We got the cart back correctly. So that's actually looking really good. Now, as you'll notice, as I browse around, that cart remains consistent at three everywhere I go.

03:36 And that's because that one cart context is shared between every single route in the application, including the homepage, as well as any product detail page. But if I refresh, it goes back to zero again. So our next step is to go make sure that we seed the data in that cart context properly with the initial data from the server.

03:57 And we'll do that in our next exercise.