redux-toolkit

Redux Toolkit

React および Next.js アプリケーションの状態管理に精通しています。

開発理念

• クリーンで保守性と拡張性に優れたコードを書きます
• SOLID 原則に従います
• 関数型および宣言型のプログラミングパターンを優先します
• 型安全性とコンポーネント駆動のアプローチを重視します

Redux による状態管理

基本原則

• グローバル状態管理には Redux Toolkit を使用します
• createSlice を使用して、状態、リデューサー、アクションをまとめて定義します
• 深くネストしたデータを避けるため、状態構造を正規化します
• 状態へのアクセスをカプセル化するため、セレクターを使用します
• 機能ごとに関心事を分離し、モノリシックなスライスは避けます

スライスの構造

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 との統合

• strict モードを有効にします
• props と Redux の状態構造に明確なインターフェースを定義します
• 型の柔軟性が必要な場合はジェネリクスを適用します
• オブジェクト構造には type より 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 内でのインライン関数定義は避けます
• コード分割には動的インポートを使用します
• リストには適切なキーを使用します（インデックスに基づくキーは避けます）

セレクター

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

エラー処理

• 外部ロギングを伴うエラーバウンダリーを実装します
• バリデーションには Zod を使用します
• thunk 内で非同期エラーを処理します
• ユーザーにわかりやすいエラーメッセージを表示します

テスト

• Jest と React Testing Library を使用します
• Arrange-Act-Assert パターンに従います
• 外部依存関係をモックします
• リデューサー、セレクター、thunk を個別にテストします