[解決済み】React Context vs React Redux、それぞれを使うべきタイミングは?[終了しました]
質問
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に置き換わると言うのは早計だ。
関連
-
[解決済み】Uncaught SyntaxError: JSON の位置 0 に予期しないトークン u があります。
-
[解決済み】XMLパースエラー:ルート要素が見つからない コンソールの場所 FF
-
[解決済み】リソースはドキュメントと解釈されるが、MIMEタイプはapplication/zipで転送される
-
[解決済み】Vueのテンプレートまたはレンダー関数が定義されていない 私はどちらも使っていないのですが?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] JavaScriptで二重引用符と単一引用符はいつ使うべきですか?
-
[解決済み] varキーワードの目的と、どのような場合に使用する(または省略する)べきですか?
-
[解決済み] encodeURI / encodeURIComponentの代わりにescapeを使用するのはどのような場合ですか?
-
[解決済み] React-routerのURLを更新したり、手動で書き込んだりするとうまくいかない
-
[解決済み] ES6インポートで中括弧を使用するのはどのような場合ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Javascript:getElementById対getElementsById(両方が別のページで動作する)。
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み込めない
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み] Uncaught Invariant Violation: 前のレンダリング中よりも多くのフックをレンダリングした
-
[解決済み] React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined [duplicate] (未定義のプロパティ'state'を読み込むことはできません。
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み] [Solved] Uncaught TypeError: nullのプロパティ 'appendChild' を読み取ることができない。
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み】Redux TypeError: 未定義のプロパティ 'apply' を読み取れない
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。