This project is a simple React application built using Vite, aimed at providing a beginner-friendly introduction to Redux Toolkit. It offers a straightforward implementation of Redux concepts for those who are new to Redux or struggling to understand redux implementation.
The application comprises a single-page interface featuring three main components:
-
Items Section: This section showcases a list of items, each having buttons for adding them to either the cart or wishlist.
-
Cart Section: Here, users can view items added to their cart. Each item comes with an option to remove it from the cart if needed and a option to clear cart.
-
Wishlist Section: Similar to the cart section, users can see items they've added to their wishlist. Like the cart, items in the wishlist can also be removed.
The state management and logic for moving items between the cart and wishlist are implementaed using React-Redux and Redux-Toolkit.
To explore this project:
- Clone the repository to your local environment.
- Install dependencies by running
npm install. - Launch the development server using
npm run dev. - Visit the prompted port in your browser to view the application.
If you're eager to explore Redux further or enhance your skills, consider adding new features to this project. One such idea is to implement a "Save for Later" section, where users can move items to "Save for Later" section and further remove items from there. You can refer to the existing "wishlist" and "cart" modules to build this section, leveraging similar functionality and patterns. This hands-on approach offers an opportunity for practical learning and a deeper understanding of Redux concepts in action.
This same project with same functionalities are implemented using other state management libraries:
Comparing all three implementations can help in understand the differences and benefits of each approach.
While contributions are not actively solicited for this project, feel free to experiment with extending its functionality on your own. If you have any suggestions or feedback, please don't hesitate to reach out.