問題一覧に戻る
上級useReducer
問題78: アクションタイプ

useReducerで整理された状態管理のためのアクションタイプの使用方法を学びます。アクションタイプの定数はタイプミスを防ぎ、リファクタリングを容易にします。アクションはtypeに基づいて状態を更新するためのpayloadデータを運びます。このパターンは複雑なアプリケーションでも拡張性があり、各状態変更の意図を明確に示します。

import React, { useReducer } from 'react';

{/* アクションタイプ定数 */}
const ACTIONS = {
  SET_NAME: '',
  SET_AGE: 'SET_AGE'
};

function reducer(state, action) {
  {/* アクションタイプで分岐 */}
  switch (action.) {
    case ACTIONS.SET_NAME: return { ...state, name: action. };
    case ACTIONS.: return { ...state, age: action.payload };
    default: return state;
  }
}

function App() {
  const [state, ] = useReducer(reducer, { name: '', age: 0 });

  return (
    <div>
      <input
        value={state.name}
        {/* payloadでdispatch */}
        onChange={(e) => ({ type: ACTIONS., payload: e.target.value })}
      />
      <p>{state.name} ({state.age})</p>
    </div>
  );
}

export default App;