/vophuthinh/E-Commerce-Website-With-Sentiment-Analysis-For-Reviews

Wiki directory

Browse AI-generated documentation for any repository.

State Management with Redux

Relevant source files

The following files were used as context for generating this wiki page:

The frontend application utilizes Redux, specifically with @reduxjs/toolkit, to manage the global application state in a predictable and centralized container. This approach is crucial for handling complex data and state interactions across various components, such as user authentication, shopping cart, product catalogs, and order management. By using Redux, the application ensures a single source of truth, simplifies state logic, and facilitates easier debugging and maintenance.

The state management architecture is built around a central store, which is composed of multiple "slices" or reducers. Each slice is responsible for a specific domain of the application's data (e.g., user, cart, products). Components interact with the Redux store by dispatching actions, which are handled by reducers to update the state. The React-Redux library provides hooks like useSelector and useDispatch to connect React components to the Redux store, allowing them to read state and dispatch actions.

Core Architecture

The state management system is composed of three main parts: the Store, Reducers, and Actions. The package.json file indicates the use of react-redux, @reduxjs/toolkit, and redux-thunk, which enables asynchronous logic in actions, such as API calls.

Sources: frontend/package.json:14-15,26-29

Redux Store

The Redux store is the single, centralized object that holds the entire state of the application. It is configured using configureStore from @reduxjs/toolkit. This function automatically sets up the store with sensible defaults, including combining reducers, adding the Redux Thunk middleware, and enabling the Redux DevTools Extension.

The store is composed of several reducers, each managing a slice of the state. Based on component usage, the main state slices are:

user: Manages authenticated user data.
seller: Manages authenticated seller data.
products: Manages product listings and creation status.
cart: Manages the shopping cart.
wishlist: Manages the user's wishlist.
order: Manages user and admin orders.
events: Manages promotional events.
coupons: Manages discount coupons.

Sources: frontend/src/components/Products/ProductDetails.jsx:13-16, frontend/src/components/Shop/CreateProduct.jsx:6-7, frontend/src/components/Profile/ProfileContent.jsx:11,151

Reducers and State Slices

Reducers are pure functions that take the current state and an action as arguments and return a new state. The application divides its state into logical slices, each handled by a dedicated reducer.

State Slice	Description	Managed By
`user`	Handles user authentication, profile information, and addresses.	`userReducer`
`seller`	Handles seller authentication and shop information.	`sellerReducer`
`products`	Manages the list of all products, shop-specific products, and product creation state.	`productReducer`
`cart`	Manages items added to the shopping cart. State is persisted in `localStorage`.	`cartReducer`
`wishlist`	Manages items added to the user's wishlist. State is persisted in `localStorage`.	`wishlistReducer`
`order`	Manages fetching and displaying orders for users, sellers, and admins.	`orderReducer`

Sources: frontend/src/components/Profile/ProfileContent.jsx, frontend/src/components/Wishlist/Wishlist.jsx, frontend/src/components/Shop/CreateProduct.jsx, frontend/src/components/Admin/AdminDashboardMain.jsx

Actions

Actions are payloads of information that send data from the application to the Redux store. They are the only source of information for the store. In this application, actions are often asynchronous thunks that perform API calls to the backend and then dispatch synchronous actions to update the store with the results.

Key actions dispatched from components include:

loadUser(): Fetches the current user's data.
addTocart(product): Adds a product to the cart.
removeFromWishlist(product): Removes a product from the wishlist.
createProduct(formData): Submits a new product to the backend.
getAllOrdersOfUser(userId): Fetches all orders for a specific user.
getAllProductsShop(shopId): Fetches all products for a specific shop.

Sources: frontend/src/components/Profile/ProfileContent.jsx:42, frontend/src/components/Route/ProductCard/ProductCard.jsx:59, frontend/src/components/Shop/CreateProduct.jsx:81, frontend/src/components/Products/ProductDetails.jsx:22

Data Flow Example: Adding to Cart

The following diagram illustrates the sequence of events when a user adds a product to their shopping cart.

Generating architecture diagram...

This diagram shows the unidirectional data flow when a user adds an item to the cart.

Sources: frontend/src/components/Route/ProductCard/ProductCard.jsx:51-62, frontend/src/components/Wishlist/Wishlist.jsx:19-23

User Interaction: A user clicks the "Add to cart" button in a component like ProductCard.
Dispatch Action: The onClick handler calls dispatch(addTocart(cartData)). The cartData object contains the product details and a quantity of 1.
Action Execution: The addTocart action is processed. It likely checks if the item already exists in the cart (retrieved from the state) and then dispatches a payload to the reducer.
Reducer Logic: The cartReducer receives the action. It creates a new cart array with the new product added, ensuring the state is updated immutably.
State Persistence: The new cart state is saved to localStorage to persist it across browser sessions.
State Update: The reducer returns the new state object to the Redux store.
Component Re-render: Any component subscribed to the cart slice of the state (using useSelector) is automatically re-rendered with the new data.

Consuming State in Components

Components access the Redux store using hooks from the react-redux library.

`useSelector`

The useSelector hook allows a component to extract data from the Redux store state. It takes a selector function as an argument, which receives the entire state object and returns the desired slice of data.

// Example from frontend/src/components/Wishlist/Wishlist.jsx
const { wishlist } = useSelector((state) => state.wishlist);

In this example, the Wishlist component subscribes to the wishlist slice of the state. It will re-render whenever the wishlist data changes.

Sources: frontend/src/components/Wishlist/Wishlist.jsx:12

`useDispatch`

The useDispatch hook returns a reference to the dispatch function from the Redux store. Components use this to dispatch actions.

// Example from frontend/src/components/Products/ProductDetails.jsx
const dispatch = useDispatch();

const addToCartHandler = () => {
    // ... logic to check stock and if item is already in cart
    dispatch(addTocart({ ...data, qty: count }));
    toast.success('The product has been added to the cart!');
};

Here, the addToCartHandler function dispatches the addTocart action with the product data and selected quantity as its payload.

Sources: frontend/src/components/Products/ProductDetails.jsx:19,39-46

Summary

The project's state management is robustly handled by Redux Toolkit, providing a scalable and maintainable architecture. It establishes a clear, unidirectional data flow, making application logic easy to follow and debug. Key features like user authentication, cart, and wishlist are managed as distinct state slices, with persistence in localStorage for an enhanced user experience. The use of redux-thunk allows for clean handling of asynchronous operations, separating API logic from UI components and ensuring a responsive and well-structured frontend application.