React Context と Redux の使い分け：それぞれのメリットとデメリット

React Context vs React Redux: それぞれの使い分け

この解説では、それぞれのメリットとデメリットを比較し、状況に応じた使い分けについて分かりやすく説明します。

React Context とは？

React Context は、React 16.3 で導入された公式の API です。コンポーネントツリー全体でデータを共有するためのシンプルな方法を提供します。

メリット:

• 軽量で使いやすい
• 導入と理解が簡単
• コンポーネント間のデータ共有を簡潔に記述できる
• ネイティブの React 機能なので、React DevTools で簡単にデバッグできる

• 状態管理の規模が大きくなると複雑になる可能性がある
• タイムトラベルやミドルウェアなどの高度な機能がない
• グローバルな状態管理には向いていない

React Redux とは？

React Redux は、Redux と React を組み合わせたライブラリです。Redux は、状態管理のための独立したライブラリであり、React 以外のフレームワークでも使用できます。

• 大規模なアプリケーションに適した強力な状態管理機能
• 多くのコミュニティサポートと豊富なライブラリ

• 導入と理解に時間がかかる
• コード量が増えて複雑になりやすい
• React 以外のフレームワークでは使用できない

それぞれのメリットとデメリットを理解した上で、以下の点を考慮して選択する必要があります。

• アプリケーションの規模と複雑性
• 必要とする状態管理機能
• 開発者の経験とスキル

目安としては、以下の通りです。

• 小規模なアプリケーションで、シンプルな状態管理のみ必要な場合は React Context
• どちらを選ぶべきか迷っている場合は、まずは React Context から試してみる

まとめ

React Context と React Redux は、それぞれ異なる強みを持つ状態管理ライブラリです。アプリケーションの規模や要件に合わせて適切なライブラリを選択することが重要です。

参考資料を参考に、それぞれのメリットとデメリットを理解し、状況に応じた使い分けをマスターしましょう。

React Context

// Contextを作成
const ThemeContext = createContext({ theme: "light" });

// Providerコンポーネント
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");

  const value = {
    theme,
    setTheme,
  };

  return (
    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
  );
};

// Consumerコンポーネント
const ThemeConsumer = ({ children }) => {
  const { theme } = useContext(ThemeContext);

  return <div>{children(theme)}</div>;
};

// 使用例
const App = () => {
  return (
    <ThemeProvider>
      <ThemeConsumer>
        {(theme) => (
          <div>
            現在のテーマ: {theme}
            <button onClick={() => setTheme("dark")}>ダークテーマに切り替え</button>
          </div>
        )}
      </ThemeConsumer>
    </ThemeProvider>
  );
};

React Redux

// Redux Store
const createStore = (reducer) => {
  let state;
  let listeners = [];

  const getState = () => state;

  const dispatch = (action) => {
    state = reducer(state, action);
    listeners.forEach((listener) => listener());
  };

  const subscribe = (listener) => {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  };

  dispatch({ type: "@@INIT" });

  return {
    getState,
    dispatch,
    subscribe,
  };
};

// Reducer
const reducer = (state, action) => {
  switch (action.type) {
    case "SET_THEME":
      return { ...state, theme: action.theme };
    default:
      return state;
  }
};

// Action
const setTheme = (theme) => ({ type: "SET_THEME", theme });

// Storeの生成
const store = createStore(reducer);

// Providerコンポーネント
const Provider = ({ store, children }) => {
  return <ReactReduxContext.Provider value={store}>{children}</ReactReduxContext.Provider>;
};

// Connect
const connect = (mapStateToProps, mapDispatchToProps) => (Component) => {
  const WrappedComponent = (props) => {
    const { store } = useContext(ReactReduxContext);
    const state = mapStateToProps(store.getState());
    const dispatch = mapDispatchToProps(store.dispatch);

    return <Component {...props} {...state} {...dispatch} />;
  };

  return WrappedComponent;
};

// 使用例
const App = () => {
  const [theme, setTheme] = useState("light");

  const store = createStore(reducer, { theme });

  return (
    <Provider store={store}>
      <div>
        現在のテーマ: {theme}
        <button onClick={() => setTheme("dark")}>ダークテーマに切り替え</button>
        <ConnectedComponent />
      </div>
    </Provider>
  );
};

// Connected Component
const ConnectedComponent = connect(
  (state) => ({ theme: state.theme }),
  (dispatch) => ({
    setTheme: (theme) => dispatch(setTheme(theme)),
  })
)(({ theme, setTheme }) => (
  <div>
    コンポーネント内のテーマ: {theme}
    <button onClick={() => setTheme("dark")}>ダークテーマに切り替え</button>
  </div>
));

React Context と React Redux 以外の状態管理方法

状態をコンポーネント内に保持する

シンプルなアプリケーションであれば、状態を各コンポーネント内に保持することで十分な場合があります。

• 軽量でシンプル

• 大規模なアプリケーションには不向き

Zustand は、React Context と同様の API を提供する軽量な状態管理ライブラリです。

• React Context よりも軽量
• TypeScript に対応

• React Context ほど広く利用されていない
• 高度な機能が少ない

MobX は、状態管理とデータバインディングを統合したライブラリです。

• データバインディングが容易
• シンプルな API

• 学習曲線がやや steep
• パフォーマンスの問題が発生する可能性がある

Recoil は、Facebook によって開発された状態管理ライブラリです。

• パフォーマンスが良い

• コミュニティ規模が小さい

Zustand と Zustand UI を組み合わせることで、状態管理と UI コンポーネントの開発を統合できます。

• コード量が少なくなる
• 開発効率が向上

• Zustand と Zustand UI の両方を学ぶ必要がある

React Context と React Redux 以外にも、さまざまな状態管理方法があります。それぞれのメリットとデメリットを理解した上で、アプリケーションの規模や要件に合わせて適切な方法を選択することが重要です。