react-native-state

React Native 状態管理スキル

Redux Toolkit、Zustand、TanStack Query、および AsyncStorage/MMKV による永続化を含む、本番環境で使える状態管理を学びます。

前提条件

• React Native の基礎知識
• TypeScript の基礎知識
• React フックの理解

学習目標

このスキルを完了すると、次のことができるようになります。

• Redux Toolkit を TypeScript でセットアップする
• 永続化機能を備えた Zustand ストアを作成する
• 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 スライス

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 ストア

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 の状態に関数がある	ミドルウェアの ignore を使用する
状態が永続化されない	ストレージ設定の誤り	persist の設定を確認する
古いデータ	無効化が不足している	適切なクエリーキーを追加する

---

検証チェックリスト

• 状態が正しく更新される
• 再起動後もデータが保持される
• サーバー状態が適切に同期される
• TypeScript の型が正しい

---

使用方法

Skill("react-native-state")

担当エージェント: 03-react-native-state