search

billychen0894 / florist-ecommerce-app

Florist eCommerce App built with Next.js 14
https://florist-ecommerce-app.vercel.app
0 stars 0 forks source link

Refactoring/Enhancement: Revamp Global State Management System #83

Open billychen0894 opened 5 months ago

billychen0894 commented 5 months ago

Overview

Implementation Checklist

Disclaimer

This issue is used for tracking purposes and to document the progress and improvements made to the project. It will remain open to allow easy access and visibility of the ongoing enhancements/refactoring efforts. Comments in this issue will be updated regularly to reflect progress and any additional improvements.

billychen0894 commented 5 months ago

Task 1: List out pages that require shared state

List of States and Actions in Categorization

Cart
  1. cartItems
  2. subtotal
  3. initializeCart()
  4. addItemToCart()
  5. removeItemFromCart()
  6. updateCartItemQuantity()
  7. resetCart()
  8. localStorageMiddleware()

Used in the following routes: /[productId], /cart, /success, /user/*

User
  1. wishlist
  2. user
  3. userStripe
  4. userOrders
  5. fetchUserWishlistById()
  6. fetchUserById()
  7. fetchUserByStripeId()
  8. fetchUserOrders()
  9. addProductsToWishlist()
  10. removeProductsFromWishlist()
  11. updateUserInfo()
  12. updateUserStripeInfo()

Used in the following routes: /[productId], /user/*

Admin
  1. accountUsers
  2. orders
  3. categories
  4. fetchAccountUsers()
  5. fetchOrders()
  6. fetchCategories()
  7. updateOrder()

Used in the following routes: /admin/*

The above states and actions managed by Redux will be migrated to Zustand and React Query. Zustand is lightweight and simple, and it is much more performant and less boilerplates than Redux. For any server states that require making requests to the server will be handled by React Query, which it provides caching and background update. In this case, cartStore will be managed by Zustand, and userStore & adminStore will be managed by React Query.

billychen0894 commented 4 months ago

Task 2: Migrate Redux to Zustand (global state management)

The app is fully migrated from Redux to Zustand, as most states are coming from server-side being handled by server actions; therefore, it's overskill by using Redux. Zustand is currently handling the cart states across the app.

Related commits