【React】useReducerの使い方

作成日: 2025年10月08日更新日: 2025年10月08日

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
react:18.2.0
react-dom:18.2.0

ReactのuseReducerとは

useReducerは、リデューサ (reducer) をコンポーネントに追加するための React Hookです。コンポーネント内で状態管理を行うために使用され、複雑な状態ロジックや複数の状態を一元管理することができます。 useStateの代替として、より複雑な状態遷移を必要とする場合や、状態管理を一元化して読みやすくするために使用されることが多いです。公式ドキュメント： https://ja.react.dev/reference/react/useReducer https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow

useReducerの基本構文


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

useReducerの使い方

useReducerの具体的な使い方を説明していきます。


1// App.js
2import './App.css';
3import React, { useReducer } from 'react';
4
5// 初期状態を定義
6const initialState = 0;
7
8// reducer 関数を定義
9function reducer(state, action) {
10  switch (action.type) {
11    case 'increment':
12      return state + 1;
13    case 'decrement':
14      return state - 1;
15    case 'reset':
16      return state = 0;
17    default:
18      throw new Error();
19  }
20}
21
22function App() {
23  // useReducer フックを使用して、state と dispatch 関数を取得
24  const [state, dispatch] = useReducer(reducer, initialState);
25
26  return (
27    <div>
28      <h1>React Hooks Tutorial</h1>
29      <hr />
30      <h2>useReducer</h2>
31      <p>Count: {state}</p>
32      {/* dispatch 関数を使用して、アクションを発行 */}
33      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
34      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
35      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
36    </div>
37  );
38}
39
40export default App;

インポート文


1// インポート文
2import React, { useReducer } from 'react';

ReactとuseReducerフックをインポートしています。

初期状態の定義


1// 初期状態の定義
2const initialState = 0;

状態の初期値を0に設定しています。

reducer関数の定義


1// reducer関数の定義
2function reducer(state, action) {
3  switch (action.type) {
4    case 'increment':
5      return state + 1;
6    case 'decrement':
7      return state - 1;
8    case 'reset':
9      return 0;
10    default:
11      throw new Error('Unknown action type');
12  }
13}

reducer関数は現在の状態 (state) とアクション (action) を受け取ります。 switch文を使って、アクションの種類 (action.type) に応じて状態を更新し、それ以外の場合はエラーをスローします。

Appコンポーネントの定義


1// Appコンポーネントの定義
2function App() {
3  const [state, dispatch] = useReducer(reducer, initialState);
4
5  return (
6    <div>
7      <h1>React Hooks Tutorial</h1>
8      <hr />
9      <h2>useReducer</h2>
10      <p>Count: {state}</p>
11      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
12      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
13      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
14    </div>
15  );
16}

useReducerフックを使用して、状態 (state) とアクションを発行するためのdispatch関数を取得します。 useReducer(reducer, initialState)は、reducer関数とinitialStateを引数に取ります。 buttonタグでボタンを作成し、それぞれにonClickハンドラを設定して、dispatch関数を使用してアクションを発行します。

おわりに

ReactのuseReducerの使い方について説明してきましたが、いかがだったでしょうか。 useReducerフックを使用すると、Reduxのような状態管理の仕組みをReactでも使うことができ、複雑な状態管理を一元化することができます。ぜひ、ReactフックのuseReducerを使いこなして、効率的なReactアプリケーションを作成しましょう。