VOOZH about

URL: https://www.geeksforgeeks.org/reactjs/implementing-add-to-cart-functionality-using-redux-toolkit-in-react/

⇱ Implementing Add to Cart functionality using Redux toolkit in React - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Implementing Add to Cart functionality using Redux toolkit in React

Last Updated : 23 Jul, 2025

Add To Cart functionality is one of the important components of the E-commerce platform. In this article, we are going to learn how to implement Add to Cart functionality using React JS and Redux Toolkit.

Preview of final output: Let us have a look at how the final output will look like.

👁 prv

Prerequisites

Approach to implement Add to Cart Functionality:

  • Create five folders named Cart, Components, Pages, Reducer and Slices in src directory and create index.jsx and RenderCartItems.jsx in Cart, Product_card.jsx in Components, Home.jsx in Pages, index.jsx in Reducer and CartSlice.jsx in Slices respectively.
  • Implement store inside index.js file as given in example.
  • Implement cartReducer inside index.js file in reducer folder.
  • Create CartSlice.jsx in Slices folder and implement functionality of add to cart and remove from cart in it.
  • Create Home.jsx page in Pages folder and fetch product details.
  • Inside Cart folder create index.js and RenderCartItems.jsx to create UI for cart.
  • In last step we will call Home page and cart in App.js file.

Steps to Create and Configure React App with redux toolkit

Step 1: Create a react app using command “npx create-react-app app-name”.

npx create-react-app app-name

Step 2: Install the required dependencies

npm install react-redux @reduxjs/toolkit
npm install react-hot-toast
npm i react-router-dom react-icons

Project Structure:

👁 pj-str-

The updated dependencies in package.json file will look like:

"dependencies": {
 "@reduxjs/toolkit": "^2.0.1",
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-hot-toast": "^2.4.1",
 "react-icons": "^4.12.0",
 "react-redux": "^9.0.4",
 "react-router-dom": "^6.21.1",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
}

Example: Create the folder structure and insert the following files accordingly.

Steps to Run the Application:

Step 1: Type following command in your terminal.

npm start

Step 2: Locate the given URL in your browser.

http://localhost:3000/

Output:


Comment