【React】useReducerの使い方 | Webエンジニア「いっしー」のブログ

動画で解説を見る

1 開発環境
2 ReactのuseReducerとは
3 useReducerの基本構文
4 useReducerの使い方
5 おわりに

開発環境

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の基本構文

useReducerの基本構文は以下の通りです。

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

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

useReducerの使い方

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

import './App.css';
import React, { useReducer } from 'react';

// 初期状態を定義
const initialState = 0;

// reducer 関数を定義
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    case 'reset':
      return state = 0;
    default:
      throw new Error();
  }
}

function App() {
  // useReducer フックを使用して、state と dispatch 関数を取得
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>React Hooks Tutorial</h1>
      <hr />
      <h2>useReducer</h2>
      <p>Count: {state}</p>
      {/* dispatch 関数を使用して、アクションを発行 */}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

export default App;

import './App.css';

import React, { useReducer } from 'react';

// 初期状態を定義

const initialState = 0;

// reducer 関数を定義

function reducer(state, action) {

switch (action.type) {

case 'increment':

return state + 1;

case 'decrement':

return state - 1;

case 'reset':

return state = 0;

default:

throw new Error();

}

function App() {

// useReducer フックを使用して、state と dispatch 関数を取得

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

return (

<div>

<h1>React Hooks Tutorial</h1>

<hr />

<h2>useReducer</h2>

<p>Count: {state}</p>

{/* dispatch 関数を使用して、アクションを発行 */}

<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>

<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>

<button onClick={() => dispatch({ type: 'reset' })}>Reset</button>

</div>

);

}

export default App;

インポート文

import React, { useReducer } from 'react';

1	import React, { useReducer } from 'react';

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

初期状態の定義

const initialState = 0;

1	const initialState = 0;

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

reducer関数の定義

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

function reducer(state, action) {

switch (action.type) {

case 'increment':

return state + 1;

case 'decrement':

return state - 1;

case 'reset':

return 0;

default:

throw new Error('Unknown action type');

}

reducer関数は現在の状態 (state) とアクション (action) を受け取ります。

switch文を使って、アクションの種類 (action.type) に応じて状態を更新し、それ以外の場合はエラーをスローします。

Appコンポーネントの定義

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

  return (
    <div>
      <h1>React Hooks Tutorial</h1>
      <hr />
      <h2>useReducer</h2>
      <p>Count: {state}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  );
}

function App() {

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

return (

<div>

<h1>React Hooks Tutorial</h1>

<hr />

<h2>useReducer</h2>

<p>Count: {state}</p>

<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>

<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>

<button onClick={() => dispatch({ type: 'reset' })}>Reset</button>

</div>

);

}

useReducerフックを使用して、状態 (state) とアクションを発行するためのdispatch関数を取得します。

useReducer(reducer, initialState)は、reducer関数とinitialStateを引数に取ります。

buttonタグでボタンを作成し、それぞれにonClickハンドラを設定して、dispatch関数を使用してアクションを発行します。

おわりに

ReactのuseReducerの使い方について説明してきましたが、いかがだったでしょうか。

useReducerフックを使用すると、Reduxのような状態管理の仕組みをReactでも使うことができ、複雑な状態管理を一元化することができます。

ぜひ、ReactフックのuseReducerを使いこなして、効率的なReactアプリケーションを作成しましょう。