🛒 技术总结：购物车状态管理与同步逻辑（访客态 → 用户态）

在构建多租户电商系统时，购物车系统的状态管理是一项关键工程。特别是涉及：

• 游客（未登录）操作购物车；

• 用户登录后购物车如何合并；

• 用户操作时，如何自动同步至服务器。

本文总结了我在项目中设计与实现这套逻辑时的技术细节与踩坑思考。

 

🧩 背景

我使用了：

• Redux 作为购物车状态管理工具；

• Redux Persist 保持游客购物车持久化；

• 中间件 + debounce 实现自动上传服务器同步；

• 登录后本地 cart 合并服务器 cart 的逻辑也做了显式处理。

 

1️⃣ 游客 → 登录用户：购物车合并策略

场景：
用户在未登录状态下添加了购物车条目，登录后需要将本地购物车与服务端购物车合并。

💡 实现逻辑（在 CSR 中执行）：

// 登录成功后触发
dispatch(mergeCartLocal(serverCart)) // 👈 merge 本地 state（优先本地）
await uploadCart(...)              // 👈 合并后上传到服务器

📌 合并策略总结：

• 相同商品同规格（variant）以本地为准；

• 服务端购物车仅作为补充来源；

• 合并后的完整购物车会被上传至服务器，统一以本地为主同步。

✅ 为什么在 CSR 执行：登陆行为通常发生在浏览器侧，合并逻辑自然应在 CSR 执行。

 

2️⃣ 登录状态下：每次操作购物车自动上传（批量）

场景：
用户已登录，此时每次加减商品后，希望自动同步最新 cart 至服务端。

💡 实现方式：

用 Redux Middleware 拦截 cart action，并添加 debouncedUploadCart：

const cartUploaderMiddleware: Middleware = store => next => action => {
  const result = next(action);

  if (action.type.startsWith('cart/')) {
    const state = store.getState();
    const { user } = state.auth;
    const { tenantId, tenantName } = state.tenant;
    const { items } = state.cart;

    if (user?.id && tenantId && tenantName) {
      debounceUploadCart(user.id, tenantId, tenantName, items);
    }
  }

  return result;
};

🧠 特点：

• 自动：不需要在每次 dispatch(addItem) 后手动调用上传逻辑；

• 去抖动：防止多次点击触发 N 次网络请求，优化性能；

• 保证安全性：上传前判断当前是否为登录状态。

 

✅ 总结：设计思想

场景	行为	技术方式
游客购物	Redux + persist	保存在 localStorage，支持刷新后保留
登录成功后	合并购物车	mergeCartLocal 合并后 debouncedUpload
用户操作购物车	自动上传	Redux Middleware + debounce

 

🧪 遇到的 bug 与反思

• 曾踩过闭包坑：merge 后立即上传的 cart 其实是 老闭包捕获的旧值；

• 解决方式是：用 Redux Middleware 获取 最新 getState() 的值；

• 另外，mergeCartLocal 的逻辑也从“数量叠加”改成“本地覆盖”。