页面刷新后localStorage存储的购物车数据被重置问题咨询

问题根因 #

该问题的核心是页面刷新后Redux store的购物车状态未从localStorage中恢复：路由跳转时Redux store实例还保存在内存中，所以功能正常；刷新页面后应用整体重加载，store会被重置为默认初始值，此时如果没有主动读取localStorage里存储的cartItems赋值给store，就会出现商品数量重置的问题。

解决方案 #

1. 给购物车Reducer添加初始状态读取逻辑

在cartReducer初始化时优先从localStorage读取已存储的购物车数据，示例代码如下：

import { CART_ADD_ITEM, CART_REMOVE_ITEM } from '../constants/cartConstants'

// 初始化时优先读取localStorage数据
const initialState = {
  cartItems: localStorage.getItem('cartItems') 
    ? JSON.parse(localStorage.getItem('cartItems')) 
    : []
}

export const cartReducer = (state = initialState, action) => {
  switch(action.type) {
    case CART_ADD_ITEM:
      const item = action.payload
      const existItem = state.cartItems.find(x => x.product === item.product)
      if (existItem) {
        return {
          ...state,
          cartItems: state.cartItems.map(x => x.product === existItem.product ? item : x)
        }
      } else {
        return {
          ...state,
          cartItems: [...state.cartItems, item]
        }
      }
    case CART_REMOVE_ITEM:
      return {
        ...state,
        cartItems: state.cartItems.filter(x => x.product !== action.payload)
      }
    default:
      return state
  }
}

2. 可选：统一配置store预加载状态

如果你使用Redux Toolkit，也可以在configureStore时统一注入预加载状态，从localStorage读取cartItems赋值给购物车模块的初始值，效果和上述方案一致。

3. 额外排查点

确认购物车页面的挂载逻辑没有主动调用addToCart传入默认数量覆盖已有状态，不要在页面加载时强制给商品设置默认数量，优先读取store中已有的状态值。

验证方式 #

刷新页面后打开浏览器开发者工具的Application面板，查看LocalStorage里的cartItems值是否和刷新前一致，同时确认Redux DevTools中购物车模块的初始值和localStorage存储值匹配，即可确认问题修复。

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