Redux Persist刷新后无法存储购物车行项目数据问题求助

1. 优先检查Redux Persist 白/黑名单配置 #

• 确认你persistConfig里的配置是否只包含了购物车展开状态对应的字段，漏掉了商品列表、小计、数量相关的字段。如果你的购物车reducer是拆分出来的，要确保整个购物车reducer被加入了persist的白名单，或者没有把购物车核心数据字段加到黑名单里。
• 错误配置示例：

// 仅持久化了isCartOpen字段，核心购物车数据未纳入持久化范围
const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['isCartOpen'] 
}

• 正确配置参考：

// 持久化整个cart reducer
const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['cart', '其他需要持久化的reducer名称']
}

2. 检查Shopify Buy SDK 返回实例的序列化问题 #

Shopify JS Buy SDK 返回的购物车实例是带方法和不可枚举属性的类实例，不是普通JS对象，Redux Persist 默认序列化的时候会丢失类实例上的自定义属性和方法。

• 修复方案：在action里把购物车数据存入Redux之前，先把SDK返回的实例转成普通可序列化对象，仅提取需要的业务字段存储：

// 错误写法：直接存储SDK返回的类实例
const setCart = (cartInstance) => ({
  type: 'SET_CART',
  payload: cartInstance
})

// 正确写法：提取纯数据字段存入Redux
const setCart = (cartInstance) => ({
  type: 'SET_CART',
  payload: {
    id: cartInstance.id,
    lineItems: cartInstance.lineItems.map(item => ({
      id: item.id,
      title: item.title,
      quantity: item.quantity,
      variant: item.variant,
      price: item.variant.price
    })),
    subtotal: cartInstance.subtotalPrice,
    totalQuantity: cartInstance.totalQuantity,
    isCartOpen: state.isCartOpen
  }
})

3. 检查reducer的初始化逻辑 #

• 确认你的购物车reducer初始值没有覆盖持久化后注入的数据：如果你在reducer里写死了初始的lineItems为空数组、subtotal为0，要确保Redux Persist 注入的持久化数据优先级高于初始值，不需要额外重置这些字段。
• 错误逻辑示例：

// 错误：初始化逻辑直接重置了核心购物车数据
const cartReducer = (state = {
  isCartOpen: false,
  lineItems: [],
  subtotal: '0',
  totalQuantity: 0
}, action) => {
  switch(action.type) {
    // 若应用初始化时触发了该action，会直接清空持久化的购物车数据
    case 'INIT_APP': 
      return {...state, lineItems: [], subtotal: '0', totalQuantity: 0}
    // 其他业务逻辑
  }
}

4. 验证localStorage存储情况 #

打开浏览器开发者工具 -> 应用 -> 本地存储，找到你站点对应的存储项，确认persist:root（或者你自定义的persist key）里的cart字段是否包含商品列表、小计等数据：

• 如果存储里就没有这些字段，说明是数据存入Redux之前就没有序列化成功，回到第二步排查序列化逻辑。
• 如果存储里有这些字段，说明是Redux Persist 注入数据到store的时候被覆盖，回到第三步排查reducer逻辑。

内容的提问来源于stack exchange，提问作者Sayak Ghosh