【第2章 続き】MutationTypes, ActionTypes, GetterTypes の設計パターン

🎯 要点まとめ

• MutationやActionの名前（キー）を文字列で直書きするとミスが起きやすい
• そこで「名前の一覧表（定数オブジェクト）」を作る
• さらにその一覧を使って型を作れば 「存在しない名前を使うとエラー」 にできる
• 大規模になるほどこの設計が役立つ（バグ予防、補完が効く）

🥕 たとえ：お店のメニュー表

MutationやActionは「お店のメニュー」みたいなもの。

いちいち「チャーシューラーメンください！」と手書きで注文すると間違う。

→ 「メニュー番号3番ください！」と番号で統一するほうがミスが減る。

それが MutationTypes.Increment みたいな書き方。

📦 基本の設計パターン

ファイル: store/types.ts

// mutationの名前一覧（リテラル型として定義）
export const MutationTypes = {
  Increment: 'increment',
  SetUserName: 'setUserName'
} as const;

// actionの名前一覧
export const ActionTypes = {
  UpdateUserName: 'updateUserName'
} as const;

// getterの名前一覧
export const GetterTypes = {
  UserInfo: 'userInfo'
} as const;

🟢 as const を付けると

→ "increment" という 固定の文字列型 になる（string型じゃなくて "increment" 型）。

🟠 これを型にする

// それぞれのキー一覧の型を作る
export type MutationType = typeof MutationTypes[keyof typeof MutationTypes];
export type ActionType = typeof ActionTypes[keyof typeof ActionTypes];
export type GetterType = typeof GetterTypes[keyof typeof GetterTypes];

✅ これで MutationType は "increment" | "setUserName" という型になる。