ReactにおけるグローバルStateの管理について

本記事の目次

はじめに
- React
- ReactにおけるグローバルState
ReactのローカルState管理方法
ReactのグローバルStateの使用例
ReactのグローバルState管理方法
まとめ

はじめに

React

Reactは、Facebookが開発し、多くの開発者や企業に支持されているJavaScriptライブラリです。

UI（ユーザーインターフェース）を作成する際に、コンポーネントベースのアーキテクチャを提供し、開発者が簡単に再利用可能なUIを構築することを可能にします。

ReactにおけるグローバルState

Stateは、アプリケーションの動作や表示内容を制御するデータです。

Reactでは、このStateをローカルコンポーネント内や、アプリケーション全体（グローバル）で管理します。（グローバルで管理するStateをグローバルStateと呼ぶ。）

特に、アプリケーションが大きくなると、多くのコンポーネントでStateが必要となり、その効果的な管理が不可欠となります。

ReactのローカルState管理方法

Reactアプリケーションはコンポーネントと呼ばれる単位で構築され、それぞれのコンポーネントが独自のStateを持つことができます。

ローカルStateは、単一のコンポーネント内でのみアクセス可能なStateです。

ReactではuseStateというフックを使用してローカルStateを作成・管理します。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

ReactのグローバルStateの使用例

ユーザー認証情報の管理

グローバルstateを使用してユーザーの認証情報を管理することで、アプリケーション内のどのコンポーネントからも認証情報にアクセスすることができます。

この情報は通常、ユーザーID、トークン、ログインステータスなどを含みます。

認証状態の作成： Context APIやReduxを用いて、認証情報を保持するグローバルstateを作成します。
認証アクションの定義：ユーザーがログインやログアウトを行う際にstateを更新するアクションを定義します。
認証情報の利用：コンポーネント内で認証情報を取得し、表示するコンテンツをコントロールします。

テーマやロケールなど、アプリ全体で共有する設定情報

テーマやロケールの情報もグローバルstateで管理すると効果的です。

これにより、アプリケーション全体で一貫したUI/UXを提供し、ユーザーが設定を変更した場合にすべてのコンポーネントに反映させることができます。

設定情報のstate作成：色、フォントサイズ、言語などの設定情報を保持するstateを作成します。
設定の更新：ユーザーが設定を変更した際に、それをstateに反映させるアクションを定義します。
設定の適用：コンポーネント内で設定情報を参照し、適用します。

ショッピングカートや通知といった、複数のコンポーネントで使用されるデータ

ショッピングカートや通知など、多くのコンポーネントやページで使用されるデータも、グローバルstateで管理することが一般的です。

データのstate作成：ショッピングカートのアイテムや通知メッセージを管理するstateを作成します。
データの操作：アイテムの追加、削除、通知の送信など、データを操作するアクションを定義します。
データの表示：ショッピングカートや通知コンポーネントでstateからデータを取得し、UIに表示します。

ReactのグローバルState管理方法

Context APIによるグローバルState管理

Context APIはReactのビルトイン機能で、コンポーネントツリーに値を挿入し、サブコンポーネントがその値をアクセスできるようにします。

import React, { createContext, useContext, useState } from 'react';

const CountContext = createContext();

function CountProvider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}> {children} </CountContext.Provider>
  );
}

function useCount() {
  return useContext(CountContext);
}

function Counter() {
  const { count, setCount } = useCount();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function App() {
  return (
    <CountProvider> <Counter /> </CountProvider>
  );
}

ReduxによるグローバルState管理

Redux は、アプリケーションのステートを管理するための予測可能なステートコンテナです。

アクション、レデューサー、ストアという概念を用いてステートの変更を一元管理します。

import React from 'react';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

// Action
const increment = () => ({ type: 'INCREMENT' });

// Reducer
const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};

// Store
const store = createStore(counter);

// Component
const Counter = ({ value, onIncrement }) => (
  <div>
    <p>Value: {value}</p>
    <button onClick={onIncrement}>Increment</button>
  </div>
);

// Map state and dispatch to props
const mapStateToProps = state => ({ value: state });
const mapDispatchToProps = dispatch => ({
  onIncrement: () => dispatch(increment())
});

// Connect component with Redux
const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);

// App component
const App = () => (
  <Provider store={store}>
    <ConnectedCounter />
  </Provider>
);

export default App;

MobXによるグローバルState管理

MobX は、リアクティブな状態管理ライブラリであり、オブジェクトの変更を自動的に検出して関連するコンポーネントを更新します。

import React from 'react';
import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react';

// Store
class CounterStore {
  value = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.value += 1;
  }
}

const counterStore = new CounterStore();

// Component
const Counter = observer(() => (
  <div>
    <p>Value: {counterStore.value}</p>
    <button onClick={() => counterStore.increment()}>Increment</button>
  </div>
));

const App = () => <Counter />;

export default App;

RecoilによるグローバルState管理

Recoil は、Facebookが開発したステート管理ライブラリで、アトムとセレクタを用いて状態を管理します。

import React from 'react';
import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue } from 'recoil';

// Atom
const counterState = atom({
  key: 'counterState',
  default: 0,
});

// Selector
const counterDisplayState = selector({
  key: 'counterDisplayState',
  get: ({get}) => {
    return `Counter is: ${get(counterState)}`;
  },
});

// Component
const Counter = () => {
  const [counter, setCounter] = useRecoilState(counterState);
  const counterDisplay = useRecoilValue(counterDisplayState);

  return (
    <div>
      <p>{counterDisplay}</p>
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
    </div>
  );
};

// App component
const App = () => (
  <RecoilRoot>
    <Counter />
  </RecoilRoot>
);

export default App;