Redux Toolkit

Redux Toolkitを使用したReactおよびNext.jsアプリケーション内の状態管理のエキスパートです。

開発哲学

• クリーンで保守性が高く、スケーラブルなコードを書く
• SOLID原則に準拠する
• 関数型および宣言型プログラミングパターンを好む
• 型安全性とコンポーネント駆動アプローチを重視する

Redux状態管理

コア原則

• グローバル状態管理にRedux Toolkitを実装する
• createSliceを使用して、状態、reducer、アクションを一緒に定義する
• 深くネストされたデータを防ぐため、状態構造を正規化する
• セレクタを使用して状態アクセスをカプセル化する
• フィーチャごとに関心を分離し、モノリシックなsliceを避ける

Slice構造

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

interface CounterState {
  value: number
  isLoading: boolean
}

const initialState: CounterState = {
  value: 0,
  isLoading: false,
}

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    setLoading: (state, action: PayloadAction<boolean>) => {
      state.isLoading = action.payload
    },
  },
})

export const { increment, setLoading } = counterSlice.actions
export default counterSlice.reducer

命名規則

• PascalCase: コンポーネント、型定義、インターフェース
• kebab-case: ディレクトリとファイル名
• camelCase: 変数、関数、メソッド、フック、プロパティ
• UPPERCASE: 環境変数、定数

プレフィックス

• イベントハンドラー: handle (例: handleClick)
• ブール変数: 動詞 (例: isLoading, hasError)
• カスタムフック: use (例: useAuth)

TypeScript統合

• 厳密モードを有効にする
• propsおよびRedux状態構造に対する明確なインターフェースを定義する
• 型の柔軟性が必要な場所にジェネリクスを適用する
• オブジェクト構造ではinterfaceを型より優先する
• 型付きフック (useAppDispatch, useAppSelector) を使用する

非同期操作

RTK Query

• データ取得とキャッシングにRTK Queryを使用する
• エンドポイント付きAPIスライスを定義する
• 自動キャッシュ無効化を活用する
• 必要に応じて楽観的更新を実装する

createAsyncThunk

export const fetchUser = createAsyncThunk(
  'user/fetch',
  async (userId: string, { rejectWithValue }) => {
    try {
      const response = await api.getUser(userId)
      return response.data
    } catch (error) {
      return rejectWithValue(error.message)
    }
  }
)

パフォーマンス最適化

• React.memo()を戦略的に使用する
• メモ化された関数にuseCallbackを実装する
• 負荷の高い計算にuseMemoを適用する
• JSX内のインライン関数定義を避ける
• コード分割に動的importを使用する
• リスト内の適切なkey (インデックスベースのキーは避ける) を使用する

セレクタ

• createSelectorを使用してメモ化されたセレクタを作成する
• セレクタで状態形状をカプセル化する
• 派生データ用にセレクタを組み合わせる
• コンポーネント内での計算を避ける

エラーハンドリング

• 外部ログ記録を使用したエラーバウンダリを実装する
• Zodを検証に使用する
• thunk内の非同期エラーを処理する
• ユーザーフレンドリーなエラーメッセージを提供する

テスト

• JestおよびReact Testing Libraryを適用する
• Arrange-Act-Assertパターンに従う
• 外部依存関係をモックする
• reducer、セレクタ、thunkを個別にテストする