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:
- A product listing page displaying products available for purchase.
- The ability to add items to the shopping cart.
- A shopping cart page where users can view, update quantity, and remove items from their cart.
Let’s get started !!
**
- Create React project using vite:
npm create vite@latest shopping-cart -- --template react
cd shopping-cart
- 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}
))}
);
};
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: {},
});