redux 购物车数据存储优化

README.md

@@ -220,4 +220,7 @@ COMPANY_NAME=Your Company Name
 2. [JSON-LD](https://www.cnblogs.com/swizard/p/19476232)
 
 
-@todo 购物车详情优化（cart-slice中规定了购物车数据的type,但是接口返回数据明显与规定的数据类型不匹配，还硬往购物车state里存）
+@todo 购物车详情优化（cart-slice中规定了购物车数据的type,但是接口返回数据明显与规定的数据类型不匹配，还硬往购物车state里存）
+## 关于购物车token
+官方原来的逻辑： 下单成功后，之前的购物车token就会失效，需要重新创建购物车token。
+> 但是下单成功后代码中并没有删除原来的购物车token，也没有获取新的购物车token。此时用户再加购物车，接口会返回来新的购物车token，而代码中也没有把旧购物车token替换成新的购物车token(当cookie里有购物车token但该token失效时，加购接口返回数据中的cartToken字段才是购物车token，否则cartToken字段是购物车id)。

src/components/checkout/stepper/shipping/ShippingMethod.tsx

@@ -59,7 +59,7 @@ export default function ShippingMethod({
       const selectedRate = shippingMethod?.find(m => m.method === data.method);
       if (selectedRate) {
         dispatch(updateCart({
-          shippingMethod: selectedRate?.method || "",
+          // shippingMethod: selectedRate?.method || "",
           selectedShippingRate: selectedRate?.method || "",
           selectedShippingRateTitle: selectedRate?.label || "",
         }));
@@ -198,7 +198,7 @@ export default function ShippingMethod({
 }
 
 const CustomRadio = (props: CustomRadioProps) => {
-  const { children, ...otherProps } = props;
+  const { children, className, ...otherProps } = props;
 
   return (
     <Radio
@@ -207,7 +207,8 @@ const CustomRadio = (props: CustomRadioProps) => {
         base: cn(
           "inline-flex m-0 bg-transparent hover:bg-transparent items-center",
           "flex-row items-baseline max-w-full cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
-          "data-[selected=true]:border-primary"
+          "data-[selected=true]:border-primary",
+          className
         ),
         hiddenInput: "peer absolute h-0 w-0 opacity-0",
       }}

src/graphql/cart/mutations/AddProductToCart.ts

@@ -46,6 +46,10 @@ export const CREATE_ADD_PRODUCT_IN_CART = gql`
         isGuest
         itemsQty
         itemsCount
+        paymentMethod
+        paymentMethodTitle
+        selectedShippingRate
+        selectedShippingRateTitle
       }
     }
   }

src/graphql/cart/mutations/CreateMergeCart.ts

@@ -11,10 +11,15 @@ export const CREATE_MERGE_CART = gql`
     ) {
       mergeCart {
         id
-         taxAmount
-         subtotal
+        itemsQty
+        taxAmount
+        subtotal
         shippingAmount
         grandTotal
+        paymentMethod
+        paymentMethodTitle
+        selectedShippingRate
+        selectedShippingRateTitle
         items {
           edges {
             node {

src/store/slices/cart-slice.ts

@@ -2,7 +2,7 @@ import { AddressDataTypes } from "@/types/types";
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
 export interface Cart {
-  id: number;
+  id: string;
   itemsQty: number;
   taxAmount: number;
   shippingAmount: number;
@@ -10,7 +10,7 @@ export interface Cart {
   items: any;
   paymentMethod: string;
   paymentMethodTitle: string;
-  shippingMethod: string;
+  // shippingMethod: string; // shippingMethod的值其实与selectedShippingRate的值相等
   selectedShippingRate: string;
   selectedShippingRateTitle: string;
 }

src/types/cart/type.ts

@@ -96,6 +96,10 @@ export interface AddProductInCart {
   success: boolean;
   message: string;
   items: AddToCartItemsConnection;
+  paymentMethod: string | null;
+  paymentMethodTitle: string | null;
+  selectedShippingRate: string | null;
+  selectedShippingRateTitle: string | null;
 }
 
 export interface CreateAddProductInCart {
@@ -166,10 +170,15 @@ export interface MergeCartItemsConnection {
 }
 export interface MergeCart {
   id: string;
+  itemsQty: number;
   taxAmount: number;
   subtotal: number;
   shippingAmount: number;
   grandTotal: number;
+  paymentMethod: string | null;
+  paymentMethodTitle: string | null;
+  selectedShippingRate: string | null;
+  selectedShippingRateTitle: string | null;
   items: MergeCartItemsConnection;
 }
 export interface CreateMergeCartPayload {

src/utils/hooks/useAddToCart.ts

@@ -36,7 +36,19 @@ export const useAddProduct = () => {
         }
         if (responseData) {
           if (responseData.success) {
-            dispatch(addItem(responseData as any));
+            let cartDetail = {
+              id: responseData.id,
+              itemsQty: responseData.itemsQty,
+              taxAmount: responseData.taxAmount,
+              shippingAmount: responseData.shippingAmount,
+              grandTotal: responseData.grandTotal,
+              items: responseData.items,
+              paymentMethod: responseData.paymentMethod || '',
+              paymentMethodTitle: responseData.paymentMethodTitle || '',
+              selectedShippingRate: responseData.selectedShippingRate || '',
+              selectedShippingRateTitle: responseData.selectedShippingRateTitle || '',
+            };
+            dispatch(addItem(cartDetail));
             showToast("Product added to cart successfully", "success");
           }
         }

src/utils/hooks/useCartDetail.ts

@@ -21,7 +21,19 @@ export function useCartDetail() {
       onCompleted: (response) => {
         const cartData = response?.createReadCart?.readCart;
         if (cartData) {
-          dispatch(addItem(cartData));
+          let cartDetail = {
+            id: cartData.id,
+            itemsQty: cartData.itemsQty,
+            taxAmount: cartData.taxAmount,
+            shippingAmount: cartData.shippingAmount,
+            grandTotal: cartData.grandTotal,
+            items: cartData.items,
+            paymentMethod: cartData.paymentMethod || '',
+            paymentMethodTitle: cartData.paymentMethodTitle || '',
+            selectedShippingRate: cartData.selectedShippingRate || '',
+            selectedShippingRateTitle: cartData.selectedShippingRateTitle || '',
+          };
+          dispatch(addItem(cartDetail));
         }
       },
       onError: (error) => {

src/utils/hooks/useMergeCart.ts

@@ -22,8 +22,20 @@ export function useMergeCart() {
       if (cartId !== null && typeof cartId !== "undefined") {
         setCookie(GUEST_CART_ID, String(cartId));
       }
+      let cartDetail = {
+        id: responseData.id,
+        itemsQty: responseData.itemsQty,
+        taxAmount: responseData.taxAmount,
+        shippingAmount: responseData.shippingAmount,
+        grandTotal: responseData.grandTotal,
+        items: responseData.items,
+        paymentMethod: responseData.paymentMethod || '',
+        paymentMethodTitle: responseData.paymentMethodTitle || '',
+        selectedShippingRate: responseData.selectedShippingRate || '',
+        selectedShippingRateTitle: responseData.selectedShippingRateTitle || '',
+      };
 
-      dispatch(addItem(responseData));
+      dispatch(addItem(cartDetail));
     },
     onError: (_error) => {
     },