私は通常、スタックにコード関連のものを投稿しますが、これはコミュニティの一般的な考えについての質問です。

データ/状態を管理するためにReactでReduxを使用することを主張する人はたくさんいるようですが、両方を読んで学習しているときに、見た目がよくないものに遭遇しました。

戻ってきた

このページの下部：http : //redux.js.org/docs/basics/UsageWithReact.html（ストアを渡す）では、React 'Context'の "Magic"を使用することをお勧めします。

1つのオプションは、それを小道具としてすべてのコンテナーコンポーネントに渡すことです。ただし、コンポーネントがコンポーネントツリーの深いところにコンテナをレンダリングするだけで、プレゼンテーションコンポーネントを介してストアをワイヤリングする必要があるので、面倒です。

私たちが推奨するオプションは、すべてのコンテナーコンポーネントがストアを魔法のように利用できるようにするために呼び出される特別なReact Reduxコンポーネントを使用することです...

反応する

React Contextページ（https://facebook.github.io/react/docs/context.html）の上部に警告があります。

コンテキストは高度で実験的な機能です。APIは将来のリリースで変更される可能性があります。

次に下部に：

明確なコードを書くときにグローバル変数を回避するのが最善であるのと同じように、ほとんどの場合、コンテキストの使用を避けるべきです...

コンポーネントを介してモデルデータを渡すためにコンテキストを使用しないでください。ツリーを介してデータを明示的にスレッド化することは、理解がはるかに簡単です...

そう...

Reduxでは、store「props」を介して各コンポーネントに「」を渡すのではなく、Reactの「コンテキスト」機能を使用することをお勧めします。Reactは反対を推奨しますが。

また、Dan Abramov（Reduxの作成者）がFacebook（Reactの作成者）で働いているようです。

• 私はこのすべてを正しく読んでいますか？
• この問題に関する現在の一般的なコンセンサスは何ですか？

コンテキストは高度な機能であり、変更される可能性があります。場合によっては、その利便性が欠点よりも優れているため、React ReduxやReact Routerなどの一部のライブラリは、実験的な性質にもかかわらず、それに依存することを選択します。

ここで重要な部分は、ライブラリという言葉です。コンテキストがその動作を変更する場合、ライブラリの作成者である私たちはを調整する必要があります。ただし、ライブラリからコンテキストAPIを直接使用するように求められない限り、ユーザーはライブラリの変更について心配する必要はありません。

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

最終的には、React Reduxは常に小道具としてストアを渡すことをサポートしているため、コンテキストを完全に回避したい場合は、その選択肢があります。しかし、これは非現実的だと思います。

TLDR：自分が何をしているか本当に理解していない限り、コンテキストを直接使用しないでください。内部でコンテキストに依存しているライブラリを使用することは比較的安全です。

他の人については知りませんが、react-reduxの接続デコレーターを使用してコンポーネントをラップし、必要なストアからの小道具のみがコンポーネントに渡されるようにします。私はコンテキストを使用していないため、これはある意味でコンテキストの使用を正当化します（そして、原則として、私が担当するコードはそれを消費しないことを知っています）。

コンポーネントをテストするとき、ラップされていないコンポーネントをテストします。react-reduxはそのコンポーネントで必要な小道具だけを渡したので、テストを書いているときに必要な小道具が正確にわかりました。

ポイントは、コードにコンテキストという単語が表示されないこと、消費しないことです。そのため、ある程度、影響はありません。これはFacebookの「実験的」警告については何も言いません。コンテキストが消えた場合、Reduxが更新されるまで、他の人と同じように私はねじ込まれます。

reduxをreactコンテキストに追加することを本当に簡単にするnpmモジュールがあります

https://github.com/jamrizzi/redux-context-provider

https://www.npmjs.com/package/redux-context-provider

import React, { Component } from 'react';
import ReduxContextProvider from 'redux-context-provider';
import createStore from './createStore';
import actions from './actions';
import Routes from './routes';

export default class App extends Component {
  render() {
    return (
      <ReduxContextProvider store={store} actions={actions}>
        <Routes />
      </ReduxContextProvider>
    );
  }
}