Building a shopping cart using React, Redux toolkit

In this article, we’ll walk through the process of creating an simple e-commerce application with the Fake store API using React redux and react toolkit, with a focus on implementing a shopping cart. By the end of this tutorial, you will have a functional application with the following features:

1. A product listing page displaying products available for purchase.
2. The ability to add items to the shopping cart.
3. A shopping cart page where users can view, update quantity, and remove items from their cart.

Let’s get started !!

**

1. Create React project using vite:

npm create vite@latest shopping-cart -- --template react
cd shopping-cart

1. We will create three components: Cart, Navbar, and Shop components.

3.We will use fakestore api to get products for our project. Below is our initial Shop.jsx:

import React, { useEffect, useState } from "react";
import axios from "axios";

const Shop = () => {
  const [products, setProducts] = useState([]);
  const getProducts = async () => {
    await axios
      .get("https://fakestoreapi.com/products")
      .then((res) => setProducts(res.data))
      .catch((err) => console.log(err));
  };
  useEffect(() => {
    getProducts();
  }, []);
  return (
    

      {products.map((product) => (
        

          
          

            

              
{product.title}
              
{product.price}
            
            Add to cart
          
        
      ))}
    
  );
};

export default Shop;

We now have the products set up so we’ll dive into redux toolkit.

Redux Toolkit
Redux toolkit is a library that helps us write redux logic. It offers tools that simplify Redux setup and use, reducing boilerplate and enhancing code maintainability.

Redux Store
A redux store is a central repository that stores all the states of an application. Store is made up of slices.
To create our own store we need to install redux toolkit and react redux:

npm install @reduxjs/toolkit react-redux

Create a store.js file inside redux folder inside src folder.

In store.js we will create a redux store (store) using configureStore provided by reduxjs and export it.

import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
  reducer: {},
});