useReducerの活用法について - Wiz テックブログ

こんにちは、フロントエンドエンジニアの松尾です。

Reactにはフック（Hooks）と呼ばれる機能があり、useState・useEffect・useCallbackといった様々な関数が用意されています。

その中の一つにuseReducerがありますが、useContextと併用して使うものとして認識されたり、useStateの影に隠れたりといった理由であまり活用されていない傾向があります。

しかし、useReducerは様々な場面で活用でき、可読性・パフォーマンス向上に大いに役立ちます。

本記事では、useReducerの基本的な使い方と様々な活用法について説明したいと思います。

useReducerとは？

useReducerとは、useStateと同様に状態管理ができるフックです。

特に複雑なロジックが絡んだ状態を管理するのに適しています。

useReducerは以下のように宣言することで使用できます。

const [state, dispatch] = useReducer(reducer, initialState)

必要な引数は、reducerとinitialStateです。

reducer：stateとactionを受け取り、新しいstateを返す関数
initialState：stateの初期値

戻り値としてstateとdispatchを返します。

state : 現在のstate値
dispatch : reducerを実行するための関数

では実際に、useReducerの使用例を見てみましょう。以下はReact公式ドキュメントから引用したコードになります。

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

initialStateでカウント値の初期値を定義しており、reducerにてincrementとdecrementのアクションを用意しています。

処理の流れは以下の通りです。

ボタンを押すとdispatchが実行され、中身がreducerのactionに入る。
switch文によって処理を分岐させ、新しいstate値を計算して返す。
useReducerが更新されたstate値を受け取り、新しいstate値を描画させる。

reduxの書き方と非常に似ていますが、useReducerはdispatchにオブジェクトを返す必要はなく、値をそのまま入れることも可能です。

const initialState = {count: 0};

function reducer(state, action) {
  return state + action;
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch(-1)}>-</button>
      <button onClick={() => dispatch(+1)}>+</button>
    </>
  );
}

このようにシンプルに記述できることもuseReducerの魅力の一つです。

ここまでの説明で「useStateでもよくない？」と思われた方も多いのではないでしょうか？

ここからは、useReducerならではの強みについて説明したいと思います。

状態管理をuseReducerにまとめられる

useStateで状態管理していると、宣言が多すぎて複雑になってしまうことはありませんか？

例えば以下のような場合です。

const App = () => {
  const [isOpen, setIsOpen] = useState(false)
  const [type, setType] = useState('small')
  const [phone, setPhone] = useState('')
  const [email, setEmail] = useState('')
  const [error, setError] = useSatte(null)

  return (
    ...
  )
}

このように状態管理が多い場合、ロジックが複雑になるにつれ可読性が悪化してしまうケースが多々あります。

状態管理をuseReducerにまとめることで「何を状態管理しているか」「初期値はなんなのか」が明確になります。

const initialState = {
  isOpen: false,
  type: 'small',
  phone: '',
  email: '',
  error: null
}

const reducer = (state, action) => {
  switch (action.type) {
    ...
    default:
      return state
  }
}

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    ...
  )
}

ロジックとビューを切り離すことができる

useReducerのもう一つの強みは、ロジックとビューを切り離すことができる点です。

今回サンプルとして、以下を実装します。

3つのitemがあり、それぞれの値の更新・削除ができるといったシンプルな実装です。

上記をuseStateとuseReducerそれぞれで実装し見比べてみましょう。

まずuseStateの場合です。

const App = () => {
  const [items, setItems] = useState([0, 0, 0]);

  const increment = (index) => {
    const newItems = items.slice()
    newItems[index]++
    setItems(newItems)
  }

  const decrement = (index) => {
    const newItems = items.slice()
    newItems[index]--
    setItems(newItems)
  }

  const deleteItem = (index) => {
    setItems(items.filter((_, i) => i !== index))
  }

  return (
    <>
      {
        items.map((v, i) => (
          <div key={i}>
            item{i}: {v}
            <button onClick={() => increment(i)}>+</button>
            <button onClick={() => decrement(i)}>-</button>
            <button onClick={() => deleteItem(i)}>削除</button>
          </div>
        ))
      }
    </>
  );
}

このように、useStateの場合は、ロジックとビューが混ざった状態となっています。

この程度の規模であれば問題ないかと思いますが、もしロジックが複雑になってきた場合、どの関数がどの状態を更新しているのかが分かりづらくなってしまいます。

次に、useReducerの場合です。

const myReducer = (state, action) => {
  const newState = state.slice()
  switch (action.type) {
    case 'increment':
      newState[action.index]++
      return newState
    case 'decrement':
      newState[action.index]--
      return newState
    case 'delete':
      return state.filter((_, i) => i !== action.index);
    default:
      throw new Error();
  }
};

const App = () => {
  const [items, dispatch] = useReducer(myReducer, [0, 0, 0]);

  return (
    <>
      {
        items.map((v, i) => (
          <div key={i}>
            item{i}: {v}
            <button onClick={() => dispatch({type: 'increment', index: i})}>
              +
            </button>
            <button onClick={() => dispatch({type: 'decrement', index: i})}>
              -
            </button>
            <button onClick={() => dispatch({type: 'delete', index: i})}>
              削除
            </button>
          </div>
        ))
      }
    </>
  );
}