Building Shopping Cart With Reactjs and Redux

Building Shopping Cart With Reactjs and Redux Part 2

In this part we of building a shopping cart with Reactjs we will handle cart display, adding products, removing products and updating product quantities.

 

 

To return to the previous part click on this link.

Cart Actions

The cart has three actions which include:

  • Adding products
  • Removing products
  • Updating product quantity

 

Open src/store/actions/cartActions.js and update it as follows:

Here i have added the action creators for each action mentioned above, each action should return an object with a type and payload. We will the type in the reducer below to update the state.

 

Open src/store/reducers/cartReducer.js and update it as follows:

The code is straightforward you should be familiar with how reducers work, in the above code i make a check for action type and in return i update the state.The most followed approach is using a switch statement but you can also use if else statement if you like.

Note that when updating the state don’t alter the original state instead make a copy of the state, do your logic and then return the new state.

 

Adding To Cart

Now let’s apply those actions into our components, so we will need to update the below components:

src/components/ProductList.js



src/components/Product.js

I added another function into ProductList.js called mapDispatchToProps() which works the same way as mapStateToProps() but it maps the functions to props to be access able inside the components so we can call them on specific events, here in our case we mapped the addToCart() function when the user click the “add to cart” button. You need to update the export statement like this:

Then i passed the addToCart as a prop to the <Product /> child component so i can execute on the button click. Also i sent another prop called inCart which checks if this product is in cart or not to toggle the button visibility and show a label instead.

 

 

Displaying Cart Items

Let’s display the actual cart items instead of the dummy content, so open src/components/cart/Cart.js and update it as follows:



src/components/cart/Item.js

I have accessed the cart from the store using the same technique we used to display the products from the store.

Using mapStateToProps() function in Cart.js i passed the cart then in the render() function i iterated though the cart items using the map() function passing item as a prop to <Item /> child component. Also i calculated the total price of the cart items to be displayed in the footer of the cart page.

Next In the Item component i modified the render() function to display the item details coming from prop like the title, image and price.

 

Removing Cart Items & Updating Quantity

If you notice in the above code i have included the code for removing cart items and updating item quantity by adding this function:

Next i update the component to react when the user click the remove button it will call this function:

Also when the user updates the quantity i added the onChange() and onSubmit() events:

The state item “btnVisible” used to toggle the button visibility when the user update it should be hidden.



Update Navbar.js

Let’s update the Navbar to show the quantity of items selected and the total price

src/components/Navbar.js

All i have included is the mapStateToProps() which injects two props to the component which is the cart and cartUpdated(). The cartUpdate() is a function that returns true, the purpose of this function when called in the component it makes a refresh to the props because props in react don’t refresh by default so we need to refresh it this way.

 

Share this: