1. ホーム
  2. ジャバスクリプト

[解決済み】React Context vs React Redux、それぞれを使うべきタイミングは?[終了しました]

2022-04-20 19:49:03

質問

React 16.3.0がリリースされました となり コンテキスト APIはもう実験的な機能ではありません。Dan Abramov (Reduxの作者)は良いコメントを書いている。 こちら しかし、ContextがまだExperimental featureであったのは2年前のことです。

質問ですが、あなたの意見/経験では、どのような場合に リアクトコンテキスト オーバー リアクト・リダックス とか、その逆は?

どのように解決するのですか?

として コンテキスト はもはや実験的な機能ではなくなり、アプリケーションで直接 Context を使用できるようになりました。

マーク・エリクソンは、彼の ブログ :

もし、プロップの受け渡しを避けるためだけにReduxを使っているのであれば、contextを使うこともできます。 しかし、それなら最初からReduxは必要なかったかもしれません。 の場所です。

また、Contextは、Contextのようなものを提供しない。 Redux DevTools を、「etc. 状態の更新を追跡する機能。 middleware を追加して、一元化された アプリケーション・ロジックをはじめとする強力な機能で Redux が可能になります。

Redux が持つ多くの機能を提供し、より強力です。 Context API にはないものであり、また ダン・アブラモフ 言及

React Reduxは内部でコンテキストを使用していますが、この事実を公開することはありません。 公開されているAPIです。そのため、React経由でコンテキストを使用する方がはるかに安全です。 なぜなら、もし変更された場合、更新の負担が大きいからです。 のコードは、あなたではなく、React Reduxにあります。

最新のContext APIに準拠するように実装を更新するのは、Redux次第です。

最新のContext APIは、単にコンポーネント間でデータを受け渡すためにReduxを使用するアプリケーションに使用できますが、一元化されたデータを使用し、APIリクエストをActionクリエーターで処理するアプリケーションでは、Context APIを使用することなく、コンポーネント間でデータを受け渡すことができます。 redux-thunk または redux-saga が必要です。これとは別に、Reduxには以下のような関連ライブラリがあります。 redux-persist これはContext APIがまだサポートしていないもので、localStorageにデータを保存し、更新時に水分を補給することができます。

ブログで@dan_abramovが言及しているように Reduxは必要ないかもしれません Reduxは、以下のような便利な用途があります。

<ブロッククオート
  • ローカルストレージに状態を永続化し、そこから起動する。
  • サーバーで状態をプリフィルし、それをHTMLでクライアントに送信し、そこから起動する。
  • ユーザーのアクションをシリアル化し、自動化されたバグレポートに状態のスナップショットとともに添付することで、製品開発者は、ユーザーのアクションがバグレポートに反映されるようになります。

    を再生し、エラーを再現することができます。
  • ネットワーク経由でアクションオブジェクトを渡すことで、コードの書き方を大きく変えることなく、コラボレーション環境を実現します。
  • コードの書き方に劇的な変更を加えることなく、取り消し履歴を維持したり、楽観的な変異を実装することができます。
  • TDDのように、開発中に状態履歴の間を移動し、コードが変更されたときにアクション履歴から現在の状態を再評価する。
  • 製品開発者がアプリのためのカスタムツールを構築できるように、開発ツールに完全な検査と制御の機能を提供する。
  • ビジネスロジックの大部分を再利用しながら、代替UIを提供する。

このように多くのアプリケーションがあるので、Reduxが新しいContext APIに置き換わると言うのは早計だ。