フロントエンド状態管理

目次

• 概要
• 使用時期
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

モダンなパターンとライブラリを使用して、スケーラブルな状態管理ソリューションを実装し、アプリケーション状態、副作用、およびコンポーネント間のデータフローを処理します。

使用時期

• 複雑なアプリケーション状態
• 複数のコンポーネント間での状態共有
• 予測可能な状態の変更
• タイムトラベルデバッグが必要な場合
• サーバー状態の同期

クイックスタート

最小限の動作例：

// store/userSlice.ts
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';

interface User {
  id: number;
  name: string;
  email: string;
}

interface UserState {
  items: User[];
  loading: boolean;
  error: string | null;
}

const initialState: UserState = {
  items: [],
  loading: false,
  error: null
};

export const fetchUsers = createAsyncThunk(
  'users/fetchUsers',
  async (_, { rejectWithValue }) => {
    try {
// ... (see reference guides for full implementation)

リファレンスガイド

references/ ディレクトリに詳細な実装があります：

ベストプラクティス

✅ すべきこと

• 確立されたパターンと規約に従う
• クリーンで保守しやすいコードを書く
• 適切なドキュメントを追加する
• デプロイ前に徹底的にテストする

❌ してはいけないこと

• テストや検証をスキップする
• エラーハンドリングを無視する
• 設定値をハードコードする