ReduxとContextAPIそれぞれの特徴と導入方法

react store React
2023年03月07日12:37
この記事は約5分で読めます。

この記事の最終更新日: 2023年4月12日

react store

ReduxとContext APIのどちらが使いやすいかは、プロジェクトの規模や複雑さ、開発者の好みによって異なります。以下にそれぞれの特徴を踏まえて説明します。

Reduxの特徴：

  • シングルストア：Reduxは、アプリケーション全体で一つのストアを使用するため、複数のコンポーネントで共有する状態を効率的に管理できます。また、ストアには明示的な変更履歴が保存されるため、デバッグがしやすくなります。
  • 予測可能な状態更新：Reduxでは、状態を変更するために純粋な関数であるreducerを使用するため、状態の更新が予測可能になります。また、reducerの単純な構造とデータフローにより、アプリケーションの複雑さが抑えられます。
  • ミドルウェアのサポート：Reduxは、ミドルウェアを使用して非同期処理やロギングなどを行うことができます。

Context APIの特徴：

  • シンプルな構造：Context APIは、Reactに標準で組み込まれているため、簡単に使い始めることができます。また、Reduxに比べてシンプルな構造を持つため、小規模なアプリケーションや単純な状態管理に向いています。
  • パフォーマンスの向上：Context APIは、コンポーネントツリー内で状態の更新が行われた場合、必要なコンポーネントだけが再レンダリングされるため、パフォーマンスの向上が期待できます。
  • フレキシブルなコンシューマ：Context APIは、useContextフックを使用して、コンシューマコンポーネントで必要な状態のみを受け取ることができます。これにより、コンポーネント間の依存関係を最小限に抑えることができます。

以上のように、ReduxとContext APIにはそれぞれ特徴があります。

大規模なアプリケーションや複雑な状態管理にはReduxが向いていますが、小規模なアプリケーションやシンプルな状態管理にはContext APIが向いています。

開発者の好みやプロジェクトの要件に合わせて、適切な状態管理ツールを選択することが重要です。また、ReduxやContext API以外にも、MobXやRecoilなどの状態管理ライブラリもあります。

これらのライブラリは、ReduxやContext APIと同様に、Reactアプリケーションの状態管理を容易にするために開発されています。

ただし、どのライブラリを選択するにしても、状態管理が必要な部分が明確であることや、状態がアプリケーション全体で共有される必要がある場合は、Reduxが最適な選択肢となるでしょう。

一方で、状態がローカルで閉じた範囲内に収まる場合は、Context APIなどのライブラリを選択することができます。

Reduxの導入方法：

Reduxをインストールします。

npm install redux

Reduxのstoreを作成します。

import { createStore } from 'redux';

const initialState = {}; // 初期状態

function rootReducer(state = initialState, action) {
  // actionに応じたstateの変更を行うreducer関数
  return state;
}

const store = createStore(rootReducer); // storeを作成

Reactアプリケーションにstoreを提供するために、<Provider>コンポーネントを使用します。

import { Provider } from 'react-redux';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

コンポーネントからstoreにアクセスするには、useSelectorフックを使用します。

import { useSelector } from 'react-redux';

function MyComponent() {
  const myData = useSelector(state => state.myData);
  // ...
}

Context APIの導入方法：

ReactのContextを作成します。

import { createContext, useContext, useReducer } from 'react';

const initialState = {}; // 初期状態

const MyContext = createContext(initialState);

function MyContextProvider({ children }) {
  const [state, dispatch] = useReducer(myReducer, initialState);

  return (
    <MyContext.Provider value={{ state, dispatch }}>
      {children}
    </MyContext.Provider>
  );
}

ReactアプリケーションのルートコンポーネントでContext Providerを使用します。

ReactDOM.render(
  <MyContextProvider>
    <App />
  </MyContextProvider>,
  document.getElementById('root')
);

コンポーネントからContextにアクセスするには、useContextフックを使用します。

function MyComponent() {
  const { state, dispatch } = useContext(MyContext);
  // ...
}

以上が、ReduxやContext APIを使用してReactにstoreを追加する手順です。

コメント

タイトルとURLをコピーしました