useReducerで、関係するstateの更新をまとめる方法

// ContactFormState.tsx
import { useState } from 'react';
import { FormView } from './FormView';

// useState を4つ使い、送信の処理の中でそれぞれを更新する
export function ContactFormState({ send }: { send: (text: string) => Promise<void> }) {
  const [text, setText] = useState('');
  const [isSending, setIsSending] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [isSent, setIsSent] = useState(false);

  async function handleSubmit() {
    setIsSending(true);
    try {
      await send(text);
      setIsSent(true);
      setText('');
    } catch {
      setError('送信できませんでした');
    } finally {
      setIsSending(false);
    }
  }

  return (
    <FormView
      text={text}
      isSending={isSending}
      error={error}
      isSent={isSent}
      onChange={setText}
      onSubmit={handleSubmit}
    />
  );
}

--- 1a. useState を4つ使う（ContactFormState） ---
  > 「こんにちは」と入力して送信（1回目は失敗する）
  送信中  画面: 入力="こんにちは" ボタン=無効 表示=[送信中…]
  失敗後  画面: 入力="こんにちは" ボタン=有効 表示=[送信できませんでした]
  > もう一度送信（2回目は成功する）
  送信中  画面: 入力="こんにちは" ボタン=無効 表示=[送信中…] [送信できませんでした]
  成功後  画面: 入力="" ボタン=無効 表示=[送信できませんでした] [送信しました]

// formReducer.ts
export type FormState = {
  text: string;
  status: 'editing' | 'sending' | 'sent' | 'error';
  error: string | null;
};

export type FormAction =
  | { type: 'edited'; text: string }
  | { type: 'submitted' }
  | { type: 'succeeded' }
  | { type: 'failed'; message: string };

export const initialState: FormState = { text: '', status: 'editing', error: null };

// 「何が起きたか」（action）を受け取り、次の state を返す
export function formReducer(state: FormState, action: FormAction): FormState {
  switch (action.type) {
    case 'edited':
      return { ...state, text: action.text, status: 'editing', error: null };
    case 'submitted':
      return { ...state, status: 'sending', error: null };
    case 'succeeded':
      return { text: '', status: 'sent', error: null };
    case 'failed':
      return { ...state, status: 'error', error: action.message };
    default: {
      // action.type の書き漏らしがあると、ここで型エラーになる
      const unknown: never = action;
      throw new Error(`Unknown action: ${JSON.stringify(unknown)}`);
    }
  }
}

// ContactFormReducer.tsx
import { useReducer } from 'react';
import { FormView } from './FormView';
import { formReducer, initialState } from './formReducer';

// state の更新は formReducer にまとめ、ここでは何が起きたかだけを伝える
export function ContactFormReducer({ send }: { send: (text: string) => Promise<void> }) {
  const [state, dispatch] = useReducer(formReducer, initialState);

  async function handleSubmit() {
    dispatch({ type: 'submitted' });
    try {
      await send(state.text);
      dispatch({ type: 'succeeded' });
    } catch {
      dispatch({ type: 'failed', message: '送信できませんでした' });
    }
  }

  return (
    <FormView
      text={state.text}
      isSending={state.status === 'sending'}
      error={state.error}
      isSent={state.status === 'sent'}
      onChange={(text) => dispatch({ type: 'edited', text })}
      onSubmit={handleSubmit}
    />
  );
}

--- 1b. useReducer にまとめる（ContactFormReducer） ---
  > 「こんにちは」と入力して送信（1回目は失敗する）
  送信中  画面: 入力="こんにちは" ボタン=無効 表示=[送信中…]
  失敗後  画面: 入力="こんにちは" ボタン=有効 表示=[送信できませんでした]
  > もう一度送信（2回目は成功する）
  送信中  画面: 入力="こんにちは" ボタン=無効 表示=[送信中…]
  成功後  画面: 入力="" ボタン=無効 表示=[送信しました]

// typo.tsx（抜粋）
<button onClick={() => dispatch({ type: 'submited' })}>つづりの間違い</button>
<button onClick={() => dispatch({ type: 'failed' })}>message がない</button>

$ npx tsc -p tsconfig.bad.json; echo "exit code: $?"
bad/formReducerWithReset.ts(30,13): error TS2322: Type '{ type: "reset"; }' is not assignable to type 'never'.
bad/typo.tsx(9,41): error TS2820: Type '"submited"' is not assignable to type '"edited" | "failed" | "submitted" | "succeeded"'. Did you mean '"submitted"'?
bad/typo.tsx(10,39): error TS2345: Argument of type '{ type: "failed"; }' is not assignable to parameter of type 'FormAction'.
  Property 'message' is missing in type '{ type: "failed"; }' but required in type '{ type: "failed"; message: string; }'.
exit code: 1

// 2-reducer-only.ts（抜粋。import は省略）
// React を使わずに、reducer だけを呼んで確かめる
const failed: FormState = { text: 'こんにちは', status: 'error', error: '送信できませんでした' };

const cases: [string, FormState, Parameters<typeof formReducer>[1], FormState][] = [
  ['入力すると text が変わる', initialState, { type: 'edited', text: 'こ' },
    { text: 'こ', status: 'editing', error: null }],
  ['失敗のあとに送信すると、エラーが消えて送信中になる', failed, { type: 'submitted' },
    { text: 'こんにちは', status: 'sending', error: null }],
  ['成功すると、入力欄が空になりエラーもない', { ...failed, status: 'sending', error: null }, { type: 'succeeded' },
    { text: '', status: 'sent', error: null }],
];

for (const [name, state, action, expected] of cases) {
  const next = formReducer(state, action);
  assert.deepEqual(next, expected);
  console.log(`ok - ${name}`);
}
// reducer は前の state を書き換えない
assert.equal(failed.status, 'error');
console.log('ok - 前の state のオブジェクトは変わっていない');

ok - 入力すると text が変わる
ok - 失敗のあとに送信すると、エラーが消えて送信中になる
ok - 成功すると、入力欄が空になりエラーもない
ok - 前の state のオブジェクトは変わっていない

  [描画 status=editing]
  [dispatch の直後に読んだ state.status=editing]
  [reducer を自分で呼んだ結果の status=sending]
  [描画 status=sending]

--- 4a. state を書き換えて返す ---
  [描画 status=editing]
  [描画 status=sending]
  クリック後のボタンの表示: editing
--- 4b. 新しいオブジェクトを返す ---
  [描画 status=editing]
  [描画 status=sending]
  クリック後のボタンの表示: sending

StrictMode なし: dispatch 1回で reducer が呼ばれた回数=1 表示=sending
StrictMode あり: dispatch 1回で reducer が呼ばれた回数=2 表示=sending