React Context vs React Redux、それぞれをいつ使用すればよいですか?[閉まっている]


187

React 16.3.0がリリースされContext APIは実験的な機能ではなくなりました。ダン・アブラモフ(Reduxのの作成者は)良いコメントを書き込みました。ここではこのことについて、コンテキストが、まだ実験的な機能だった2年でした。

私の質問は、あなたの意見/経験では、React ReduxよりもReact Contextをいつ使用する必要があるか、またはその逆ですか?


ReduxとReact Context APIを比較しているのは、コンポーネント間で変数の同期を維持したいだけだからです。duixnpmパッケージを確認してください。これは、コールバックを備えた単純な状態マネージャーであり、実装は非常に簡単です。明確にするために:私は作成者です。
Broda Noel

回答:


208

コンテキストはもはや実験的な機能ではありません、あなたが直接あなたのアプリケーションのコンテキストを使用することができますし、それがために設計されたものを深くネストされたコンポーネントにデータをダウン渡すための素晴らしいことになるだろう。

Mark eriksonが彼のブログに書いているように:

小道具の受け渡しを避けるためにReduxのみを使用している場合、コンテキストがReduxを置き換える可能性がありますが、おそらく最初からReduxは必要ありませんでした。

また、コンテキストは、、Redux DevTools状態の更新を追跡するmiddleware機能、一元化されたアプリケーションロジックを追加する機能、その他の強力な機能を提供しませんRedux

Redux@danAbramovが述べたようにContext Api、はるかに強力であり、が提供しない多くの機能を提供します

React Reduxは内部的にコンテキストを使用しますが、パブリックAPIでこの事実を公開しません。そのため、React Reduxを介してコンテキストを使用する方が、直接変更するよりもはるかに安全だと感じるはずです。なぜなら、変更された場合、コードの更新の負担は、あなたではなくReact Reduxにあるからです。

最新のコンテキストAPIに準拠するように実装を実際に更新するReduxまで

最新のContext APIは、コンポーネント間でデータを渡すためにReduxを使用するだけのアプリケーションに使用できますが、集中型データを使用し、アクションの作成者がAPIリクエストを処理するアプリケーションは、redux を使用するredux-thunkか、redux-sagaそれでも必要です。このreduxとは別に、redux-persistストアデータをlocalStorageに保存し、更新時に再水和できるようにする他のライブラリが関連付けられています。これは、コンテキストAPIがまだサポートしていないものです。

@dan_abramovが彼のブログで述べたように、あなたはReduxを必要としないかもしれません、そのreduxはのような便利なアプリケーションを持っています

  • 状態をローカルストレージに永続化し、そのままそこから起動します。
  • サーバーの状態を事前入力し、HTMLでクライアントに送信し、ボックスから起動します。
  • ユーザーのアクションをシリアル化し、状態のスナップショットと一緒に自動化されたバグレポートに添付して、製品開発者
    がエラーを再現できるようにします。
  • ネットワーク経由でアクションオブジェクトを渡し、コードの記述方法を大幅に変更することなく、協調的な環境を実装します。
  • コードの記述方法に劇的な変更を加えることなく、元に戻す履歴を維持するか、楽観的な変更を実装します。
  • 開発中の状態履歴間を移動し、コードが変更されたときにアクション履歴から現在の状態を再評価します。
  • 製品開発者が
    アプリのカスタムツールを作成できるように、開発ツールに完全な検査および制御機能を提供します。
  • ほとんどのビジネスロジックを再利用しながら、代替UIを提供します。

これらの多くのアプリケーションを使用すると、Reduxが新しいContext APIに置き換えられるとは言い切れません


では、再利用についてはどうでしょうか?redux + thunkを実行すると、コンテキストは完全に再利用可能になり、特にredux + sagaはほとんど使用できなくなります。
Yurii Haiovyi

4
@Daggett理解する必要があることの1つは、reduxがコンテキストではなく、コンテキストの上に構築されていること、コンテキストによって受け継がれているストア、再利用性によって何を意味するかを説明できることです
Shubham Khatri

副作用のある再利用可能なコンテナのようなこのような基本的なものの開発でさえ、やり直しの悪夢になります。Reduxはアプリケーションレベルにタイトで、再利用可能などと言うかもしれませんが、再利用可能とは完全に再利用可能という意味です...スパイクのスパゲッティがなく、個別のパッケージとして構築されており、アプリケーションセットアップに個別に再利用できます。
Yurii Haiovyi

@YuriiHaiovyi私はあなたの質問に同意します。この回答は基本的に、リンクされたブログ投稿の内容をまとめたものです。自分の視点を共有することについては何もありませんでした。たとえば、コンテキストのみを使用していて、行き詰まって、x、y、zの理由からそれが悪い選択だと感じ、それを解決するRedux、Mobxに移動しました。またはその逆例えば物語。主に人々がこれを尋ねたり検索したりして、読者が考えて計算した決定を下すのに役立つかもしれないいくつかの悪いまたは良い物語があるかどうかを確認しています...
Arup Rakshit

4
reduxのどの部分が再利用できないのですか?リデューサー、セレクター、アクション、アクションクリエーターは、別のアプリケーションで簡単に再利用できます。
デヴィッド・モルナー

85

小道具を深くネストされたコンポーネント渡さないようにするためだけにReduxを使用している場合は、ReduxをContextAPIに置き換えることができます。これはまさにこのユースケースを対象としています。

一方、他のすべてにReduxを使用している場合(予測可能な状態コンテナーを持ち、コンポーネントの外でアプリケーションのロジックを処理し、アプリケーションの状態を一元化し、Redux DevToolsを使用して、いつ、どこで、なぜ、どのようにアプリケーションの状態を追跡するか変更、またはRedux FormRedux SagaRedux UndoRedux PersistRedux Loggerなどのプラグインを使用している場合)、Reduxを放棄する理由はまったくありません。ContextAPIは、このいずれかを提供していません。

そして、私は個人的に、Redux DevTools拡張機能が、Reduxを使い続けることを正当化する驚くほど過小評価されているデバッグツールであると信じてます。

いくつかの参照:


12

API呼び出し(Axiosも使用)を行い、応答をレデューサーにディスパッチするために、redux-thunkでreduxを使用することを好みます。綺麗で分かりやすいです。

Context APIは、Reactコンポーネントがストアに接続される方法に関するreact-reduxパーツに非常に固有です。これには、react-reduxが最適です。ただし、必要に応じて、Contextが正式にサポートされているため、react-reduxの代わりにContext APIを使用できます。

したがって、問題は、Context APIとreduxではなく、Context APIとreact-reduxである必要があります。また、質問は少し意見が分かれています。私はreact-reduxに精通しており、すべてのプロジェクトで使用しているため、引き続き使用します。(私が変更するインセンティブはありません)。

しかし、今日だけreduxを学習していて、どこでも使用していない場合は、Context APIを試して、react-reduxをカスタムContext APIコードに置き換える価値があります。たぶん、それはそのようにはるかにきれいです。

個人的には、親しみやすさの問題です。これらは同等であるため、どちらを選択するかについて明確な理由はありません。そして内部的に、react-reduxはとにかくコンテキストを使用します。


10

Reduxを使用する理由は次のとおりです。

  • グローバル状態オブジェクトが必要な場合(デバッグ可能性、永続性などのさまざまな理由から)
  • あなたのアプリは大きく、または大きくなり、多くの開発者にスケーリングする必要があります。そのような場合、おそらくある程度の間接性(つまり、イベントシステム)が必要です。組織は実際にそれらを聞くことができます

アプリ全体の間接参照のレベルはおそらく必要ないため、スタイルを混在させ、ローカルの状態/コンテキストとReduxを同時に使用することは問題ありません。


1
  • さまざまな目的でミドルウェアを使用する必要がある場合。たとえば、ロギングアクション、エラーレポート、サーバーの応答に応じて他のリクエストをディスパッチするなど。
  • 複数のエンドポイントからのデータが単一のコンポーネント/ビューに影響を与える場合。
  • アプリケーションのアクションをより細かく制御したい場合。Reduxは、アクションとデータ変更の追跡を可能にし、デバッグを大幅に簡素化します。
  • サーバーの応答でアプリケーションの状態を直接変更したくない場合。Reduxはレイヤーを追加します。ここで、このデータを適用する方法、タイミング、および適用するかどうかを決定できます。オブザーバーパターン。アプリ全体で複数のパブリッシャーとサブスクライバーを作成する代わりに、コンポーネントをReduxストアに接続するだけです。

From:いつReduxを使うのですか?

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.