React Native如何持久化Store值？解决购物车重启丢失问题

这个问题很常见，本质是因为你的Store状态只存在内存里，当应用关闭或重启时，内存里的状态会被清空，所以购物车数据就没了。要解决这个问题，我们需要把购物车数据持久化存储到本地，比如浏览器的localStorage（Web应用）或者React Native的AsyncStorage，每次初始化Store时从本地读取数据，每次更新购物车时同步保存到本地。

下面分Web和React Native两种场景给出具体方案：

Web应用方案 #

1. 初始化Store时读取本地存储的购物车数据 #

修改你的默认状态初始化逻辑，先从localStorage里读取之前保存的购物车数据，如果没有就用空数组：

// 先从localStorage读取已保存的购物车数据
const savedCart = localStorage.getItem('app_cart');
// 解析成数组，没有数据就用空数组
const parsedCart = savedCart ? JSON.parse(savedCart) : [];

const DEFAULT_STATE_TRENDING = {
  data:{}, 
  specialoffdata:[], 
  banner:[], 
  offerstitle:[], 
  cart: parsedCart, // 用本地存储的数据初始化购物车
  cartcount: parsedCart.length, // 同步计算购物车数量
  isFetching:false, 
  dataFetched:false, 
  error:false, 
}

2. 更新购物车时同步保存到本地存储 #

在处理购物车更新的reducer逻辑里，每次修改cart数组后，都把新的cart数据保存到localStorage：

function trendingReducer(state = DEFAULT_STATE_TRENDING, action) {
  switch(action.type) {
    case 'ADD_TO_CART': {
      const newCart = [...state.cart, action.payload];
      // 把新的购物车数据存到localStorage
      localStorage.setItem('app_cart', JSON.stringify(newCart));
      return {
        ...state,
        cart: newCart,
        cartcount: newCart.length
      };
    }
    // 别忘了处理删除商品的情况，同样要同步保存
    case 'REMOVE_FROM_CART': {
      const newCart = state.cart.filter(item => item.id !== action.payload.id);
      localStorage.setItem('app_cart', JSON.stringify(newCart));
      return {
        ...state,
        cart: newCart,
        cartcount: newCart.length
      };
    }
    // 其他action类型的处理...
    default:
      return state;
  }
}

React Native应用方案 #

React Native不能用localStorage，需要用官方推荐的@react-native-async-storage/async-storage库，用法类似但都是异步操作：

1. 安装依赖 #

先安装AsyncStorage库：

npm install @react-native-async-storage/async-storage
# 或者用yarn
yarn add @react-native-async-storage/async-storage

2. 初始化时异步读取购物车数据 #

在根组件或者首页组件里，用useEffect异步读取本地存储的数据，然后dispatch action更新Store：

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useDispatch } from 'react-redux';

function HomeScreen() {
  const dispatch = useDispatch();

  useEffect(() => {
    const loadSavedCart = async () => {
      try {
        const savedCart = await AsyncStorage.getItem('app_cart');
        if (savedCart) {
          const parsedCart = JSON.parse(savedCart);
          // dispatch一个action更新Store的购物车状态
          dispatch({ type: 'LOAD_SAVED_CART', payload: parsedCart });
        }
      } catch (error) {
        console.error('读取购物车数据失败:', error);
      }
    };

    loadSavedCart();
  }, [dispatch]);

  // 组件其他逻辑...
}

3. 在reducer中处理加载和更新逻辑 #

添加对应的reducer case来处理加载购物车和更新购物车的操作：

function trendingReducer(state = DEFAULT_STATE_TRENDING, action) {
  switch(action.type) {
    case 'LOAD_SAVED_CART': {
      return {
        ...state,
        cart: action.payload,
        cartcount: action.payload.length
      };
    }
    case 'ADD_TO_CART': {
      const newCart = [...state.cart, action.payload];
      // 异步保存到AsyncStorage
      AsyncStorage.setItem('app_cart', JSON.stringify(newCart));
      return {
        ...state,
        cart: newCart,
        cartcount: newCart.length
      };
    }
    case 'REMOVE_FROM_CART': {
      const newCart = state.cart.filter(item => item.id !== action.payload.id);
      AsyncStorage.setItem('app_cart', JSON.stringify(newCart));
      return {
        ...state,
        cart: newCart,
        cartcount: newCart.length
      };
    }
    // 其他action处理...
    default:
      return state;
  }
}

注意事项 #

• localStorage和AsyncStorage只能存储字符串，所以必须用JSON.stringify把对象/数组转成字符串，读取时用JSON.parse转回来。
• 如果购物车商品里包含不能被JSON序列化的内容（比如函数、Symbol），要先过滤掉这些内容，不然会报错。
• 如果你的购物车数据量很大或者需要更复杂的查询，可以考虑用IndexedDB（Web）或Realm（React Native），但大部分场景下上述方案足够用了。

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