当前位置：首页 > article >正文

使用 Context API 管理临时状态，避免 Redux/Zustand 的持久化陷阱

article 2025/3/10 17:52:30

在开发 React Native 应用时，我们经常需要管理全局状态，比如用户信息、主题设置、网络状态等。而对于某些临时状态，例如 数据同步进行中的状态 (isSyncing)，我们应该选择什么方式来管理它？

在项目开发过程中，我遇到了这样一个问题：

问题背景：按钮的禁用状态丢失

在应用中，有两个数据同步任务：

基础数据同步（BasicDataSync）
按日期选择的同步（SelectedDateSync）

它们各自有一个 isSyncing 变量来表示是否正在同步，以防止用户重复点击按钮。但使用 useState 时，如果用户切换页面，isSyncing 变量会重置，导致按钮又可以点击，可能导致重复请求。

为了让 isSyncing 状态在不同页面间保持一致，我们考虑使用全局状态管理方案。

方案分析：如何存储 `isSyncing` 状态？

方案 1：使用 AsyncStorage / localStorage（❌ 不推荐）

问题：如果我们把 isSyncing 状态持久化到本地存储（比如 AsyncStorage 或 localStorage），会导致 程序退出后，按钮仍然保持禁用状态。

应用异常退出后，isSyncing 仍然是 true
重新打开应用，按钮仍然不可点击，而同步任务已经终止
用户必须手动清除存储，或者编写额外逻辑检查同步任务是否真的在运行

方案 2：使用 Redux / Zustand（⚠️ 仍然存在潜在问题）

Redux 和 Zustand 是强大的状态管理工具，特别适合管理 持久化的全局数据，比如用户登录状态、设置等。但是对于 isSyncing 这种短暂的 UI 状态，它们可能会引入 状态持久化导致的错误。

Redux 需要手动清除 isSyncing 状态，否则应用退出后仍然保持
Zustand 如果使用 persist 配置，也会遇到同样的问题
这些库更适合存储业务数据，而非 UI 交互状态

方案 3：使用 Context API（✅ 最优解）

最终，我们选择了 Context API 来管理 isSyncing 状态。

轻量级，无需额外的库
不会持久化，应用退出时状态自动清除
适合管理 UI 控制状态，避免 Redux / Zustand 的持久化问题

实现 SyncContext.tsx

我们创建了 SyncContext.tsx，独立管理 BasicDataSync 和 SelectedDateSync 的 isSyncing 状态。

创建 `SyncContext.tsx`

import React, { createContext, useState, useContext } from 'react';

interface SyncContextType {
  isSyncingBasicData: boolean;
  setIsSyncingBasicData: (syncing: boolean) => void;
  isSyncingSelectedDate: boolean;
  setIsSyncingSelectedDate: (syncing: boolean) => void;
}

const SyncContext = createContext<SyncContextType>({
  isSyncingBasicData: false,
  setIsSyncingBasicData: () => {},
  isSyncingSelectedDate: false,
  setIsSyncingSelectedDate: () => {},
});

export const SyncProvider: React.FC = ({ children }) => {
  const [isSyncingBasicData, setIsSyncingBasicData] = useState(false);
  const [isSyncingSelectedDate, setIsSyncingSelectedDate] = useState(false);

  return (
    <SyncContext.Provider
      value={{
        isSyncingBasicData,
        setIsSyncingBasicData,
        isSyncingSelectedDate,
        setIsSyncingSelectedDate,
      }}
    >
      {children}
    </SyncContext.Provider>
  );
};

export const useSync = () => useContext(SyncContext);

在 `App.tsx` 中注册 `SyncProvider`

import { SyncProvider } from './context/SyncContext';

<SyncProvider>
  <NavigationContainer>
    <NativeBaseProvider>
      <AppNavigator />
    </NativeBaseProvider>
  </NavigationContainer>
</SyncProvider>

在 `BasicDataSync.tsx` 和 `SelectedDateSync.tsx` 中使用 `SyncContext`

import { useSync } from '../../context/SyncContext';

const BasicDataSync = () => {
  const { isSyncingBasicData, setIsSyncingBasicData } = useSync();

  const handleSync = async () => {
    setIsSyncingBasicData(true);
    try {
      await SyncService.syncExtensionData();
    } finally {
      setIsSyncingBasicData(false);
    }
  };

  return <Button isLoading={isSyncingBasicData} onPress={handleSync}>Sync</Button>;
};

总结：为什么 Context API 是最佳选择？

方案	状态存储	退出应用后状态	适用场景
AsyncStorage / localStorage	本地存储	退出应用仍然保持	适用于长期数据（如用户设置）
Redux / Zustand	状态管理器	可能仍然保持	适用于全局共享数据（如用户信息）
Context API	内存存储	退出应用后状态重置	适用于 UI 交互状态（如 `isSyncing`）