react-native-state

React Native 状态管理技能

学习生产环境就绪的状态管理，包括 Redux Toolkit、Zustand、TanStack Query，以及使用 AsyncStorage/MMKV 进行持久化。

前置条件

• React Native 基础知识
• TypeScript 基础知识
• 了解 React hooks

学习目标

完成此技能后，你将能够：

• 使用 TypeScript 配置 Redux Toolkit
• 创建支持持久化的 Zustand store
• 使用 TanStack Query 管理服务端状态
• 使用 AsyncStorage/MMKV 持久化数据
• 为每种使用场景选择合适的解决方案

---

涵盖主题

1. 配置 Redux Toolkit

// store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import { authSlice } from './slices/authSlice';

export const store = configureStore({
  reducer: {
    auth: authSlice.reducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

2. RTK Slice

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface AuthState {
  user: User | null;
  token: string | null;
}

export const authSlice = createSlice({
  name: 'auth',
  initialState: { user: null, token: null } as AuthState,
  reducers: {
    setUser: (state, action: PayloadAction<User>) => {
      state.user = action.payload;
    },
    logout: (state) => {
      state.user = null;
      state.token = null;
    },
  },
});

3. Zustand Store

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

interface AppStore {
  theme: 'light' | 'dark';
  setTheme: (theme: 'light' | 'dark') => void;
}

export const useAppStore = create<AppStore>()(
  persist(
    (set) => ({
      theme: 'light',
      setTheme: (theme) => set({ theme }),
    }),
    {
      name: 'app-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

4. TanStack Query

import { useQuery, useMutation } from '@tanstack/react-query';

export function useProducts() {
  return useQuery({
    queryKey: ['products'],
    queryFn: () => api.getProducts(),
    staleTime: 1000 * 60 * 5, // 5 minutes
  });
}

export function useCreateProduct() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: api.createProduct,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['products'] });
    },
  });
}

5. 如何选择

解决方案	使用场景
useState/useReducer	组件本地状态
Zustand	简单的全局状态、偏好设置
Redux Toolkit	复杂的应用状态、大型团队
TanStack Query	服务端状态、缓存、同步
Context	主题、认证状态（低频更新）

---

快速入门示例

// Zustand + TanStack Query combo
import { create } from 'zustand';
import { useQuery } from '@tanstack/react-query';

// UI state with Zustand
const useUIStore = create((set) => ({
  sidebarOpen: false,
  toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
}));

// Server state with TanStack Query
function ProductList() {
  const { data, isLoading } = useQuery({
    queryKey: ['products'],
    queryFn: fetchProducts,
  });

  const sidebarOpen = useUIStore((s) => s.sidebarOpen);

  // Render with both states
}

---

常见错误与解决方案

错误	原因	解决方案
"Non-serializable value"	Redux 状态中包含函数	使用中间件忽略配置
状态未持久化	存储配置错误	检查 persist 配置
数据过时	缺少失效处理	添加适当的查询键

---

验证清单

• 状态正确更新
• 重启后仍能正常持久化
• 服务端状态正确同步
• TypeScript 类型正确

---

用法

Skill("react-native-state")

绑定的 Agent：03-react-native-state