問題一覧に戻る
上級useReducer
問題76: useReducer基礎

アクションによる状態管理のためのuseReducerの基礎を学びます。useReducerは複雑な状態ロジックに対してuseStateの代替手段を提供します。アクションは何が起きたかを記述し、reducer関数が状態の変更方法を決定します。状態更新が前の状態に依存する場合や、複数の関連する値が協調的な更新を必要とする場合に有用なパターンです。

import React, { useReducer } from 'react';

{/* reducer関数を定義 */}
function reducer(, action) {
  switch (action.) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    default: return state;
  }
}

function Counter() {
  {/* reducerフックを使用 */}
  const [count, ] = (reducer, 0);

  return (
    <div>
      <p>{count}</p>
      {/* increment actionをdispatch */}
      <button onClick={() => ({ type: 'increment' })}>+</button>
      {/* decrement actionをdispatch */}
      <button onClick={() => ({ type: '' })}>-</button>
    </div>
  );
}

export default Counter;