問題一覧に戻る
上級useReducer
問題77: 複雑なstate管理

useReducerで複数の関連する状態を管理する方法を学びます。複数の状態値が相互依存する場合、useReducerは集中的な状態管理を提供します。単一のdispatch関数がすべての関連する値を原子的に更新します。これにより一貫性のない状態を防ぎ、複雑な状態ロジックをより保守可能でテスト可能にします。

import React, { useReducer } from 'react';

{/* 初期状態オブジェクト */}
const initialState = { count: 0, text: '' };

{/* 複雑な状態のreducer */}
function reducer(state, ) {
  switch (action.type) {
    case 'increment': return { ...state, count: state.count + 1 };
    case 'setText': return { ...state, : action. };
    case 'reset': return ;
    default: return state;
  }
}

function App() {
  {/* 複雑なreducerを使用 */}
  const [, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>{state.count}</p>
      <input
        value={state.text}
        {/* 更新actionをdispatch */}
        onChange={(e) => ({ type: '', payload: e.target.value })}
      />
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

export default App;