深入探究 React 和 React Native 中使用 TypeScript 的状态管理（2025 版）

2025年国情咨文 状态管理已从技术考量演变为战略架构决策，它能够成就或毁掉您的应用程序。在 2025 年，随着应用程序处理实时数据、AI 集成和复杂的用户工作流，选择正确的状态管理方法比以往任何时候都更加重要。该领域已经成熟，像Redux Toolkit这样的解决方案已成为企业标准，而像Zustand和Jotai这样的灵活替代方案则占据了中端市场的主导地位。本指南将通过实用的 TypeScript 示例探索现代状态管理生态系统，您可以将其直接应用于您的项目。

为什么国家管理在2025年比以往任何时候都更加重要 假设一个在城市高峰时段运营的送餐应用。该应用必须同时处理以下任务：实时订单跟踪、司机位置更新、库存变化、促销横幅、用户身份验证和支付处理。仅使用本地状态和 Context API 会导致：

性能灾难：单个驱动程序位置更新将触发整个应用程序的重新渲染，导致用户在浏览菜单或下订单时出现明显的滞后。

状态同步的噩梦：由于状态管理分散，不同的组件显示有关订单状态或库存可用性的相互冲突的信息。

调试地狱：如果没有集中状态和开发工具，追踪促销横幅消失或订单处理失败的原因几乎变得不可能。

团队协作挑战：如果没有可预测的状态容器，从事不同功能的多个开发人员将不断与状态结构变化发生冲突。

离线功能限制：实现强大的离线功能和数据同步需要基本解决方案无法提供的复杂状态管理模式。

2025 年的应用格局需要能够处理以下问题的状态管理解决方案：

多设备实时数据同步 AI/ML 模型状态管理 跨平台一致性（Web、iOS、Android） 具有冲突解决功能的离线优先功能 微前端架构支持 大玩家：深入探讨实际实施情况

1. Context API + Hooks：轻量级冠军 真实场景：具有主题支持（亮/暗/阅读模式）和用户偏好持久性的多语言新闻应用程序。

其工作原理：主题和语言偏好设置很少更改，并且几乎每个组件都会使用它们。较低的更新频率最大限度地减少了性能问题。

TypeScript 实现：

// types/theme.ts export type ThemeMode = "light" | "dark" | "reading"; export type Language = "en" | "es" | "fr" | "de";

export interface AppSettings { theme: ThemeMode; language: Language; fontSize: number; reduceAnimations: boolean; }

// context/AppSettingsContext.tsx import React, { createContext, useContext, useReducer, ReactNode } from "react"; import { AppSettings, ThemeMode, Language } from "../types/theme";

type Action = | { type: "SET_THEME"; payload: ThemeMode } | { type: "SET_LANGUAGE"; payload: Language } | { type: "SET_FONT_SIZE"; payload: number } | { type: "TOGGLE_ANIMATIONS" };

const settingsReducer = (state: AppSettings, action: Action): AppSettings => { switch (action.type) { case "SET_THEME": return { ...state, theme: action.payload }; case "SET_LANGUAGE": return { ...state, language: action.payload }; case "SET_FONT_SIZE": return { ...state, fontSize: action.payload }; case "TOGGLE_ANIMATIONS": return { ...state, reduceAnimations: !state.reduceAnimations }; default: return state; } };

const initialState: AppSettings = { theme: "light", language: "en", fontSize: 16, reduceAnimations: false, };

const AppSettingsContext = createContext<{ settings: AppSettings; dispatch: React.Dispatch; } | null>(null);

export const AppSettingsProvider: React.FC<{ children: ReactNode }> = ({ children, }) => { const [settings, dispatch] = useReducer(settingsReducer, initialState);

// Persist settings to localStorage React.useEffect(() => { localStorage.setItem("appSettings", JSON.stringify(settings)); }, [settings]);

return ( <AppSettingsContext.Provider value={{ settings, dispatch }}> {children} </AppSettingsContext.Provider> ); };

export const useAppSettings = () => { const context = useContext(AppSettingsContext); if (!context) { throw new Error("useAppSettings must be used within AppSettingsProvider"); } return context; };

// components/ThemeToggle.tsx import React from "react"; import { useAppSettings } from "../context/AppSettingsContext"; import { ThemeMode } from "../types/theme";

export const ThemeToggle: React.FC = () => { const { settings, dispatch } = useAppSettings();

const cycleTheme = () => { const themes: ThemeMode[] = ["light", "dark", "reading"]; const currentIndex = themes.indexOf(settings.theme); const nextIndex = (currentIndex + 1) % themes.length; dispatch({ type: "SET_THEME", payload: themes[nextIndex] }); };

return ( <button onClick={cycleTheme} className={theme-btn ${settings.theme}}> Switch to{" "} {settings.theme === "light" ? "Dark" : settings.theme === "dark" ? "Reading" : "Light"}{" "} Mode ); }; 2. Redux Toolkit（RTK）：企业标准 真实场景：具有复杂交易流程、实时余额更新、欺诈检测警报和监管合规要求的银行应用程序。

其优势：银行领域需要绝对的可预测性、审计追踪、时间旅行调试以及复杂的异步工作流。RTK 的中间件生态系统、开发者工具和可预测的状态更新至关重要。

TypeScript 实现：www.mxwd.cc

// features/transactions/transactionsSlice.ts import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit"; import { Transaction, TransactionFilters, TransactionState } from "./types"; import { bankingAPI } from "../../api/bankingAPI";

const initialState: TransactionState = { transactions: [], filters: { dateRange: { start: null, end: null }, amountRange: { min: 0, max: 10000 }, categories: [], status: "completed", }, loading: false, error: null, selectedTransaction: null, };

// Async thunk for fetching transactions export const fetchTransactions = createAsyncThunk( "transactions/fetchTransactions", async (filters: TransactionFilters, { rejectWithValue }) => { try { const response = await bankingAPI.getTransactions(filters); return response.data; } catch (error) { return rejectWithValue( error.response?.data?.message || "Failed to fetch transactions" ); } } );

// Async thunk for transferring funds export const transferFunds = createAsyncThunk( "transactions/transferFunds", async ( transferData: { fromAccount: string; toAccount: string; amount: number; description: string; }, { rejectWithValue } ) => { try { const response = await bankingAPI.transfer(transferData); return response.data; } catch (error) { return rejectWithValue( error.response?.data?.message || "Transfer failed" ); } } );

const transactionsSlice = createSlice({ name: "transactions", initialState, reducers: { setFilters: (state, action: PayloadAction<Partial>) => { state.filters = { ...state.filters, ...action.payload }; }, clearFilters: (state) => { state.filters = initialState.filters; }, selectTransaction: (state, action: PayloadAction) => { state.selectedTransaction = state.transactions.find((t) => t.id === action.payload) || null; }, }, extraReducers: (builder) => { builder // Fetch transactions cases .addCase(fetchTransactions.pending, (state) => { state.loading = true; state.error = null; }) .addCase(fetchTransactions.fulfilled, (state, action) => { state.loading = false; state.transactions = action.payload; }) .addCase(fetchTransactions.rejected, (state, action) => { state.loading = false; state.error = action.payload as string; }) // Transfer funds cases .addCase(transferFunds.fulfilled, (state, action) => { state.transactions.unshift(action.payload); }) .addCase(transferFunds.rejected, (state, action) => { state.error = action.payload as string; }); }, });

export const { setFilters, clearFilters, selectTransaction } = transactionsSlice.actions; export default transactionsSlice.reducer;

// features/transactions/TransactionList.tsx import React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { RootState } from "../../app/store"; import { fetchTransactions, setFilters } from "./transactionsSlice"; import { TransactionFilters } from "./types";

export const TransactionList: React.FC = () => { const dispatch = useDispatch(); const { transactions, filters, loading, error } = useSelector( (state: RootState) => state.transactions );

useEffect(() => { dispatch(fetchTransactions(filters)); }, [dispatch, filters]);

const handleFilterChange = (newFilters: Partial) => { dispatch(setFilters(newFilters)); };

if (loading) return

return (

优势：Zustand 的简洁性和性能使其成为光标移动等高频更新的理想选择。其较小的软件包体积有利于 Web 应用程序，而简单的 API 则支持快速开发。

TypeScript 实现：

// stores/useCollaborationStore.ts import { create } from "zustand"; import { devtools } from "zustand/middleware"; import { User, CursorPosition, DesignDocument } from "../types/collaboration";

interface CollaborationState { // Document state currentDocument: DesignDocument | null; elements: DesignElement[];

// User presence activeUsers: User[]; userCursors: Record<string, CursorPosition>;

// Actions setCurrentDocument: (doc: DesignDocument) => void; updateElement: (elementId: string, updates: Partial) => void; addElement: (element: DesignElement) => void; setUserCursor: (userId: string, position: CursorPosition) => void; addActiveUser: (user: User) => void; removeActiveUser: (userId: string) => void;

// Derived state getElement: (elementId: string) => DesignElement | undefined; getUsersInDocument: () => User[]; }

export const useCollaborationStore = create()( devtools((set, get) => ({ currentDocument: null, elements: [], activeUsers: [], userCursors: {},

setCurrentDocument: (doc) => set({ currentDocument: doc }),

updateElement: (elementId, updates) =>
  set((state) => ({
    elements: state.elements.map((element) =>
      element.id === elementId ? { ...element, ...updates } : element
    ),
  })),

addElement: (element) =>
  set((state) => ({ elements: [...state.elements, element] })),

setUserCursor: (userId, position) =>
  set((state) => ({
    userCursors: { ...state.userCursors, [userId]: position },
  })),

addActiveUser: (user) =>
  set((state) => ({
    activeUsers: state.activeUsers.some((u) => u.id === user.id)
      ? state.activeUsers
      : [...state.activeUsers, user],
  })),

removeActiveUser: (userId) =>
  set((state) => ({
    activeUsers: state.activeUsers.filter((user) => user.id !== userId),
    userCursors: Object.fromEntries(
      Object.entries(state.userCursors).filter(([id]) => id !== userId)
    ),
  })),

getElement: (elementId) =>
  get().elements.find((element) => element.id === elementId),

getUsersInDocument: () =>
  get().activeUsers.filter(
    (user) => user.currentDocumentId === get().currentDocument?.id
  ),

})) );

// components/CursorTracker.tsx import React, { useEffect } from "react"; import { useCollaborationStore } from "../stores/useCollaborationStore";

export const CursorTracker: React.FC = () => { const { userCursors, getUsersInDocument } = useCollaborationStore(); const users = getUsersInDocument();

return (

    return (
      <div
        key={userId}
        className="user-cursor"
        style={{ left: position.x, top: position.y }}
      >
        <div className="cursor-arrow" style={{ color: user.color }} />
        <span className="user-name" style={{ backgroundColor: user.color }}>
          {user.name}
        </span>
      </div>
    );
  })}
</div>

// Update local cursor position in store
setUserCursor("current-user-id", cursorPosition);

// In a real app, you'd also send this to other collaborators via WebSocket

  // Invalidate and refetch to ensure we have the latest data
  queryClient.invalidateQueries({ queryKey: queryKeys.posts() });
},
onError: (error) => {
  console.error("Failed to create post:", error);
  // Show error notification to user
},

  <div className="posts-container">
    {posts?.map((post) => (
      <PostCard key={post.id} post={post} />
    ))}
  </div>

  {posts?.length === 0 && (
    <div className="empty-state">
      <p>No posts yet. Be the first to share something!</p>
    </div>
  )}
</div>

  {state.matches("payment") && (
    <PaymentForm
      onSubmit={(method) => send({ type: "SET_PAYMENT", method })}
    />
  )}

  {state.matches("review") && (
    <OrderReview
      context={state.context}
      onConfirm={() => send({ type: "CONFIRM_ORDER" })}
    />
  )}

  {state.matches("processing") && <ProcessingSpinner />}

  {state.matches("failure") && (
    <ErrorDisplay
      error={state.context.error}
      onRetry={() => send({ type: "RETRY" })}
    />
  )}

  {state.matches("success") && (
    <OrderConfirmation orderId={state.context.orderId!} />
  )}
</div>

  addToQueue: (action) => {
    const id = Math.random().toString(36).substr(2, 9);
    set((state) => ({
      queue: [...state.queue, { id, ...action, timestamp: Date.now() }],
    }));
  },

  processQueue: async () => {
    const { queue, clearProcessed } = get();
    const successfulIds: string[] = [];

    for (const item of queue) {
      try {
        // Execute the action based on type
        switch (item.type) {
          case "CREATE_POST":
            await socialAPI.createPost(item.payload);
            break;
          case "UPDATE_PROFILE":
            await socialAPI.updateProfile(item.payload);
            break;
          // Add more action types as needed
        }
        successfulIds.push(item.id);
      } catch (error) {
        console.error(`Failed to process action ${item.id}:`, error);
      }
    }

    clearProcessed(successfulIds);
  },

  clearProcessed: (ids) => {
    set((state) => ({
      queue: state.queue.filter((item) => !ids.includes(item.id)),
    }));
  },
}),
{
  name: "offline-queue",
  storage: createJSONStorage(() => asyncStorage),
}

window.addEventListener("online", handleOnline);
return () => window.removeEventListener("online", handleOnline);