Reactコンポーネントの状態をカプセル化するためにクロージャを使用する

Question

コンポーネントの階層内で互いに非常に離れた2つの要素間でデータを渡すとき、データを渡すのは面倒な作業です。これらのユースケースでは、Reduxを使用することに頼ったのは、コンポーネントが大量にあるときを把握することが少ないからです。

小さなプロジェクトで行ったことは、閉包を使って状態をカプセル化し、その変数をエクスポートして別の場所で消費することです。私はこれが反パターンだと感じますが、うまくいきます。

この方法は、コンポーネント内で変更される変数を宣言することによって行われます。この同じ変数は、他の場所からインポートされ、他の場所から消費されます。ここで

は私が（ちょうど大きなコンポーネント階層があるふりを）やっているものに小さなサンプルです：https://codesandbox.io/s/2R9RvYkN1

だから私の質問は以下のとおりです。同じ結果を達成するためのより良い方法はありますか？これらのユースケースに対してFluxの実装を使用する必要がありますか？大きなコンポーネント階層を使って小道具を渡すだけでいいですか？

Answer 1

あなたが言ったように、reduxはあなたのアプリにグローバルな "App state"を提供することでこの問題を解決し、その状態にしたいコンポーネントを接続することができます。

あなたの「閉鎖」は単に貧困層のReduxにすぎず、グローバルな状態でもあり、Reduxが提供する機能はありません（特に記述しない限り）。

CompBは、CompBのクリックイベントに基づいて再レンダリングする必要があります。どのようにクロージャで自動的に行うのですか？リスナーを追加し、関連する状態が変更されたかどうかを確認してから再レンダリングする必要があります。

これらはすべてReduxによって無料で提供されていますので、追加のメリットは表示されません（reduxを使用しない場合を除き、独自のメリットがあります）。

reduxを使わないことが大切だとすれば、これは "素晴らしい"ことができますが、非常に危険です。