React Native中Zustand大量数据持久化：突破AsyncStorage 5MB限制方案

当AsyncStorage的5MB上限满足不了Zustand的大体积数据持久化需求时，以下几个方案可以直接落地：

1. 用Realm（本地数据库）替代AsyncStorage #

Realm是轻量型本地NoSQL数据库，存储上限仅受设备剩余存储空间限制，适合存储结构化/半结构化的大量数据，还支持查询、事务等高级功能。

实操步骤： #

• 安装依赖：npm install realm @realm/react
• 定义Realm数据模型：

import Realm from 'realm';

export const DataSchema = {
  name: 'AppData',
  properties: {
    key: 'string',
    value: 'string', // 存储序列化后的Zustand状态
  },
  primaryKey: 'key',
};

• 在Zustand store中集成Realm：

import { create } from 'zustand';
import Realm from 'realm';

let realm;

const useStore = create((set, get) => ({
  appData: {},
  initStore: async () => {
    realm = await Realm.open({ schema: [DataSchema] });
    const storedData = realm.objects('AppData').find(item => item.key === 'zustand_state');
    if (storedData) {
      set({ appData: JSON.parse(storedData.value) });
    }
  },
  saveStore: async (newData) => {
    set({ appData: newData });
    realm.write(() => {
      realm.create('AppData', {
        key: 'zustand_state',
        value: JSON.stringify(newData),
      }, Realm.UpdateMode.Modified);
    });
  },
}));

2. 基于SQLite的结构化存储 #

如果数据是高度结构化的，SQLite更合适，支持复杂查询操作，存储上限同样依赖设备存储空间。可使用expo-sqlite（Expo项目）或react-native-sqlite-storage（裸RN项目）。

实操示例（Expo项目）： #

• 安装依赖：npx expo install expo-sqlite
• 初始化数据库并集成到Zustand：

import { create } from 'zustand';
import * as SQLite from 'expo-sqlite';

const db = SQLite.openDatabase('appDB.db');

const useStore = create((set, get) => ({
  userList: [],
  initStore: () => {
    db.transaction(tx => {
      tx.executeSql(
        'CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, email TEXT);'
      );
      tx.executeSql('SELECT * FROM users', [], (_, { rows }) => {
        set({ userList: rows._array });
      });
    });
  },
  addUser: (name, email) => {
    db.transaction(tx => {
      tx.executeSql(
        'INSERT INTO users (name, email) VALUES (?, ?);',
        [name, email],
        () => {
          // 更新Zustand状态
          get().initStore();
        }
      );
    });
  },
}));

3. 文件系统直接存储 #

对于非结构化的大体积数据（比如大量JSON数组、缓存媒体元数据等），可直接把序列化后的状态写入设备文件系统，用react-native-fs或expo-file-system实现。

实操示例（Expo项目）： #

• 安装依赖：npx expo install expo-file-system
• 集成到Zustand：

import { create } from 'zustand';
import * as FileSystem from 'expo-file-system';

const STATE_FILE_PATH = `${FileSystem.documentDirectory}zustand_state.json`;

const useStore = create((set, get) => ({
  largeData: {},
  initStore: async () => {
    const fileExists = await FileSystem.getInfoAsync(STATE_FILE_PATH);
    if (fileExists.exists) {
      const fileContent = await FileSystem.readAsStringAsync(STATE_FILE_PATH);
      set({ largeData: JSON.parse(fileContent) });
    }
  },
  saveStore: async () => {
    const state = get().largeData;
    await FileSystem.writeAsStringAsync(STATE_FILE_PATH, JSON.stringify(state));
  },
}));

4. AsyncStorage分块存储（妥协方案） #

如果不想引入新依赖，可将大体积数据拆分成多个小于5MB的块，分别存在不同的AsyncStorage key下，读取时再合并。仅适合数据量接近但未大幅超出5MB的场景，需自行处理分块、合并逻辑。

实操示例： #

import { create } from 'zustand';
import AsyncStorage from '@react-native-async-storage/async-storage';

const CHUNK_SIZE = 4 * 1024 * 1024; // 4MB每块

const useStore = create((set, get) => ({
  largeData: {},
  initStore: async () => {
    const chunkKeys = await AsyncStorage.getAllKeys();
    const dataChunks = await AsyncStorage.multiGet(chunkKeys.filter(key => key.startsWith('zustand_chunk_')));
    const sortedChunks = dataChunks.sort((a, b) => {
      const numA = parseInt(a[0].split('_')[2]);
      const numB = parseInt(b[0].split('_')[2]);
      return numA - numB;
    });
    const fullData = JSON.parse(sortedChunks.map(chunk => chunk[1]).join(''));
    set({ largeData: fullData });
  },
  saveStore: async () => {
    const dataStr = JSON.stringify(get().largeData);
    const chunks = [];
    for (let i = 0; i < dataStr.length; i += CHUNK_SIZE) {
      chunks.push(dataStr.slice(i, i + CHUNK_SIZE));
    }
    const chunkPairs = chunks.map((chunk, index) => [`zustand_chunk_${index}`, chunk]);
    await AsyncStorage.multiSet(chunkPairs);
  },
}));

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