Overview

<aside> 📌 This project is implemented using Redux Toolkit to bind the react with redux, I used it for it’s ease of use and extra reducers middleware, and to practice it more and have some experience with it.

</aside>

<aside> 💡 Store configurations are located in src/redux/index.ts The Component specific slices are located in the src/redux/slicesfolder.

</aside>

Store Slices

• User Slice

  This store module handles app user. You can find it’s slice in src/redux/slices/userSlice.ts

  • State : This slice stores a Partial<User> data, handling the logged-in state for the app.
  • Reducers :
    1. userLogin : this stores the user’s data in the store.
    2. userLogout : this deletes the user’s data from the store.

• Category Slice

  This store module handles the client data of the categories. You can find it’s slice in src/redux/slices/categorySlice.ts

  • State : This slice fetches the categories data from DB and stores it in the client machine as object that has categories as Category[].
  • Thunks :
    1. getCategories: Fetches categories from DB.
    2. addCategoryData: Post a new category into DB and pushes it into the local store.
    3. deleteCategory: Deletes a category from the DB and the local store.
    4. editCategoryData: Modifies a category name and patch the edits to the DB and the local store.

• Products Slice This store module handles the different product actions. You can find it’s slice in src/redux/slices/productSlice.ts

  • State : This slice fetches the products data from DB and stores it in the client machine as object that has products as Product[]
  • Thunks :
    1. getProducts : Fetches products from DB.
    2. addProductData : Creates a new Product and post it to the DB and returns the updated list from it.
    3. deleteProduct : Deletes a Product from the DB using it’s unique ID that was generated from the DB when added to it.
    4. editProductData : Selects a Product by it’s gevin ID aand updates it’s data from the new data which gevin by the user and patch it in the DB.

• Cart Slice

  This store module handles the cart’s different actions. You can find it’s slice in src/redux/slices/cartSlice.ts

  • State : This slice fetches the carts from DB and stores it in the client’s machine as an object that has carts as Cart[] , each Cart is an object that has products as CartItem[]
  • Thunks :
    1. getCarts : Fetches carts list from DB.
    2. addCart : Creates a new Cart and posts it into the DB.
    3. deleteCart : Deletes a single cart by it’s unique ID .
    4. addProductToCart: Adds a Product to a specific Cart by their ID, it has two cases:
       • If the Product already exist in Cart, it increment it’s quantity value of that CartItem
       • If the Product is new, then add it as CartItem to the Cart
    5. removeProductFromCart: Removes a Product from a specific Cart by thier ID.
    6. updateProductFromCart: Handles the changes of Quantity of the Product when changing the Quantity manually, it has four states :
       • If the action was to increment, then it will add that amount.
       • If the action was to decrement, then it will decrement that amount.
       • If the action was to update, then it will update the amount.
       • If the action was to decrement, and the amount was 1, then it’ll remove the Product