Implement Cart Functionality for a Store with React Context
We want visitors to our site to be able to browse our products and add them to a cart for purchase.
To do this we'll create React Context to expose a cart value to our application so we can use it where we need to. This context will handle adding items and deleting items from the cart. We will hook up the add functionality to buttons on our product cards as well as display how many items we have in the cart in our Nav bar.
Instructor: [0:00] Let's take a look at how we can add items to cart. Under each product, we should see add-to-cart button. In our code, let's go back to our product list component.
[0:10] Here, for product item, we're going to change this anchor tag to a div. We're going to add a button at the bottom. Let's add some styling to the button. We will add some padding, give it indigo background and rounded corners. Let's make the padding a little bigger.
[0:36] Now, when we select the add-to-cart button, the item should get added into the cart. The item count in the navbar should get updated every time we add something to the cart. Then, in the cart page, we will be able to see all the items that are added to the cart.
[0:53] In our application, we need a state management solution to do all this. We're going to use the React context API to manage the state of our application.
[1:03] We're going to create a new folder called Context and, inside it, I'm going to create a new file called index.js. This is where we're going to put our application context.
[1:15] We're going to import useReducer and createContext from React. Then, we're going to define our initialState.
[1:30] Next, we will create a new context. Then we're going to create a cartReducer function that is going to take state and action.
[1:44] We create a switch on the action type, and we have two cases. The first one is add to cart, and we're just going to add a new item to the initialState.
[1:58] We check if the item already exists in the cart. If the item does exist, then we increase the quantity of that item by one, and if the item doesn't exist, we just add that item.
[2:18] The next case is remove from cart. For this scenario, we simply just delete the item from the cart object.
[2:26] First, I create a copy of the cart object and then delete the key, and then we return the new state with the new cart object. By default, we'll just return the state.
[2:38] Next, we're going to create a context provider. We're going to use the useReducer hook. We're going to plug in our cartReducer and the initialState. We're just going to plug this into our context provider. Finally, export context and provider.
[3:07] Next, we're going to go to app.tsx file and import provider from context and wrap all our components with the context provider. Let's save and close this.
[3:29] At this point, our context is ready to be consumed by our components. We're going to go back to our product list component. Here, we're going to import useContext from react. Then, we're going to import context from our context file.
[3:52] Next, we're going to go to our product item component. Here, we're going to destructure dispatch from useContext hook. Finally, on add-to-cart button click, we are going to fire this dispatch function.
[4:19] As an argument, I'm going to pass in an object, which is going to have a type of add to cart and a payload of the product itself.
[4:32] We want to update the navbar component every time something is added to the cart. Let's go to the nav.tsx file. Here, we're going to import useContext from React. Then, we're going to import context from our context file. Then, in the nav component, we're going to destructure state from useContext hook.
[4:58] Let's just console.log this state here. Now, let's go back to our browser. We'll open up our DevTools here. Notice that every time we try to add something to the cart, it logs the state in our console. However, notice we also have undefined in the cart object. I probably missed something in the reducer function.
[5:24] Let's go to our context file again. Surely here, everything has to be _ID and not ID. Let's go ahead and fix these.
[5:41] We'll go back to our application. Now, when we try to add an item, we'll see that the state is getting updated. Back in the nav component, let's count the number of items. I'm just going to make a simple for loop to go over the object and count all the entries.
[6:17] Then, we are going to display this count. Now, if we go back to the app and start adding items, you'll see that the cart is getting updated...