State Management with React Context 3 exercises

Handling Reviews with React Context

Let's start by creating the ReviewsContext component at app/products/[id]/ReviewsContext.tsx.

Creating a ReviewsContext Component

ReviewsContext will be a client component because it needs to use context. Like before, we're going to bring in createContext and useState to manage our st

Loading solution


00:00 All right, the first thing I'm going to do is I'm going to go create a ReviewsContext component, and it's going to be a client component because it needs to use context. Just like before, we're going to bring in CreateContext and UseState to manage our state, but this time we're going to bring in Review as opposed to the cart which we brought in before.

00:17 First up, we're going to define our UseReviewsState hook, and much like our UseCartState hook, we are going to take the initial reviews like we did with the initial cart before. So next up, we're going to create our context. Our context will have the output of that UseReviewsState hook.

00:34 Then we'll create a custom hook called UseReviews that we'll use to get that context. And if we didn't find a context, then we'll just throw an error saying, hey, you need to add a context. And then finally, we'll create a ReviewsProvider which takes those initial reviews and uses that UseReviewsState hook to initialize some state that we'll then

00:52 pass down to any children using that ReviewsContextProvider. All right, now let's go bring it into our page. And then right at the top of our JSX, we will instantiate it with the product reviews. So we'll just give it just the reviews. That's

01:10 really important. The only thing going out to the client in this model is the reviews, not any of the immutable data. And we're doing that by only passing the reviews as the property. Now we can get rid of some things. We can go down here to our reviews and get rid of the reviews

01:27 because we're going to get those via context. We're also going to remove them from the average ratings. Now let's go do the average ratings first since it's simpler. We'll bring in UseReviews. We won't get our reviews as a property, but we'll get them from the hook. Easy peasy.

01:45 And we'll get rid of this type. We'll do something similar in our reviews component. We'll bring in the UseReviews. We'll get rid of the reviews as a prop. And then we'll get reviews as well as set reviews from that hook. Now let's use that set reviews by going down here. And then we can set reviews, the output of our ad review action. That's going

02:08 to give us our new set of reviews. So let's take a look. So now as we navigate along from route to route, let's make sure that those reviews change. Yep, those reviews are changing from route to route. That's great. So now we really like this wizard shirt. So we'll say Great Wizard

02:25 Shirt. Except we don't think so. We'll call it one. We'll hit Submit Review. Now we notice the average rating has dropped down to 3.3. So we didn't like it that much, but I guess we did because we said it's great, whatever. And we've gone and we've added that review. So that's looking

02:45 awesome. And one more final check. Let's make sure that the output of the server includes our reviews. We want that because of search engine optimization. We want to make sure the reviews are in the server output. So we'll take a little bit of the review, go into the page source. All right, we've got our

03:01 page source up. Let's go take a look. We have our wizard design is unique. So that means that our reviews are being output during server-side rendering, which is great for search engine optimization. So that actually concludes our React implementation of our e-commerce app. Next up, we

03:18 are going to re-implement this using Redux and using it safely on both the server and the client.