Reactで状態管理を行う方法

Reactでコンポーネントを作るときに、状態を管理することは非常に重要です。この記事では、Reactで状態管理を行う方法について紹介します。

React Hooksによる状態管理

React 16.8以降から導入されたHooksは、状態管理を簡単にするための機能です。以下に例を示します。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useStateを使うことで、countとsetCountの2つの変数を定義しています。countは現在のカウント数を保持するための変数で、setCountはカウント数を更新するための関数です。このように、Hooksを使うことで、簡単に状態管理を行うことができます。

Reduxによる状態管理

Reduxは、大規模なアプリケーションのための状態管理ライブラリです。以下に例を示します。

import { createStore } from 'redux';

const initialState = {
  count: 0
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

function Counter() {
  const count = store.getState().count;

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => store.dispatch({ type: 'INCREMENT' })}>
        Click me
      </button>
      <button onClick={() => store.dispatch({ type: 'DECREMENT' })}>
        Click me
      </button>
    </div>
  );
}

Reduxでは、状態をstoreというオブジェクトで管理します。storeを作成するときに、reducerと呼ばれる関数を渡します。reducerは、現在の状態とアクションを受け取って、新しい状態を返す関数です。

Counterコンポーネントでは、store.getState()で現在の状態を取得し、store.dispatch()でアクションを発行しています。

まとめ

Reactでは、HooksやReduxを使って状態管理を行うことができます。Hooksは小規模なアプリケーションに
適していて、Reduxは大規模なアプリケーションに適しています。どちらを選ぶかは、アプリケーションの規模や要件によって異なります。

この記事では、Reactで状態管理を行う方法について紹介しました。React HooksやReduxを使うことで、簡単に状態管理を行うことができます。今後のReact開発で、ぜひ活用してみてください。