如何让Zustand Persist同时兼容Web与React Native环境？

核心思路是通过环境自动判断封装统一的存储适配器，让Zustand的persist中间件在Web端使用localStorage，在React Native端自动切换为AsyncStorage，无需修改Store核心逻辑。

步骤1：封装跨端存储适配器 #

创建一个适配文件，统一存储接口，根据环境自动选择底层存储实现：

// storage-adapter.js
import AsyncStorage from '@react-native-async-storage/async-storage';

// 判断当前运行环境是否为React Native
const isReactNative = typeof window === 'undefined' || !!navigator.product?.includes('ReactNative');

// 实现Zustand persist要求的存储接口：getItem/setItem/removeItem
export const storageAdapter = {
  getItem: async (key) => {
    return isReactNative 
      ? await AsyncStorage.getItem(key) 
      : localStorage.getItem(key);
  },
  setItem: async (key, value) => {
    isReactNative 
      ? await AsyncStorage.setItem(key, value) 
      : localStorage.setItem(key, value);
  },
  removeItem: async (key) => {
    isReactNative 
      ? await AsyncStorage.removeItem(key) 
      : localStorage.removeItem(key);
  },
};

步骤2：在Zustand Store中使用适配存储 #

创建Store时，将persist中间件的storage参数指定为我们封装的适配器即可：

// useAppStore.js
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { storageAdapter } from './storage-adapter';

const useAppStore = create(
  persist(
    (set, get) => ({
      // 示例状态与方法，替换为你的业务逻辑
      userProfile: null,
      updateUserProfile: (profile) => set({ userProfile: profile }),
      clearUserProfile: () => set({ userProfile: null }),
    }),
    {
      name: 'app-user-storage', // 存储的唯一键名
      storage: storageAdapter, // 指定跨端存储适配器
    }
  )
);

export default useAppStore;

注意事项 #

• React Native项目需提前安装依赖：npm install @react-native-async-storage/async-storage，Web端无需此依赖，打包工具会自动tree-shaking移除相关代码。
• 环境判断逻辑可根据实际场景调整，比如SSR场景下Web端也没有window，可补充兜底逻辑。
• Zustand的persist中间件原生兼容异步存储，无需额外处理同步/异步差异。

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