再利用可能なコンポーネントのRedux状態を整理する方法は？

Question

TL; DR：自分の状態を管理するための複雑なロジックを持つ再利用可能なコンポーネントの場合（店舗、アクション、レデューサーを使って状態を管理する方法は、オートコンプリートや絵文字などのFacebookブックコメントテキストエリアと考える）このコンポーネントの複数インスタンスのうち、ウェブサイト全体に広がっていますか？

公式レデックスレポからreal-world exampleと考えてください。それに 我々が持っている：特定のレポを主演しているユーザーのリストが表示され

• RepoPage、
• 特定のユーザによって主演されているレポのリスト
• Listを表示UserPageを、それはitemsとrenderItemに提供されているユーザーまたはreposのリストを表示できるように一般的です。特にRepoPageは、Userコンポーネントを使用してレポを主演した各ユーザーを表示し、UserPageはRepoコンポーネントを使用して、スター付きレポをそれぞれ表示します。

は、私は本当に状態のすべてが再来になりたいと仮定します。

特に、すべてのRepoPageとUserPageのすべてのリストの状態をReduxによって管理したいとします。これは、既に巧妙な3レベルの深い木で、例での世話をされています

• トップレベルでの鍵は、それが
（例ではそれが store.paginationと呼ばれている）であるコンポーネントデータの種類を言います
• は、コンポーネントが可能なコンテキストの各特定の型のブランチ固有のコンテキスト（store.pagination.starredByUser[login]、store.pagination. stargazersByRepo[repo]）があるように（store.pagination.starredByUser、store.pagination. stargazersByRepo）
• 次いでとして多くのキーがある

I FEがありますこれらの3つのレベルは、コンポーネントタイプ、親タイプ、親IDにも対応しています。

しかし、私はこの考え方をどのように拡張して、Listコンポーネント自体に多くの子があり、Reduxで追跡する価値のある状態を扱うかを知りません。

• Userコンポーネントが
• Repoコンポーネントがその背景色
• 各Repoの状態をトグルボタンがありそのまま残り：

  は特に、私はここで解決策を実装する方法を知りたいですコンポーネントはReduxの

によって管理されている（私はいくつかの拡張機能を使用して幸せ私の研究

）まだレデューサーを使用しますが、この質問の目的のために、「単にローカル状態に反応してそれを維持する」と行きたくないReduxの、とこれまで：

• エルムにアクション（メッセージ）が親コンポーネントは、メッセージの「外側エンベロープ」を展開し、子減速に子供を対象とし、内部アクションを提供できるような方法でネストすることができる代数的データ型ているように見えます（アップデータ）。
• それは、アクションのタイプとして文字列を使用するReduxのでは慣例であることから、上記のアイデアの自然な翻訳が接頭辞を使用することであり、これは（foremly Reduxの-ニレとして知られている）ものをprismであるように思いません。 action.typeは、コンポーネントのツリーをパスに伝える部分文字列で構成されています。大藤this commentにプリズムの作者は再来が欠落しているエルムの建築の最も重要な部分は、上記の二つのアプローチは、私は完全には把握していない持ってReusing Reducer Logic
• で説明したアプローチの拡大バージョンであるように見える行動
• の組成物であることを説明しtomkisどのようにredux-flyが内部で動作するのですか？action.typeは、storeの実装パスによってコンポーネントインスタンスを識別するのではなく、コンポーネントツリーのパスにも対応しています。
あなたは目を細めた場合、私にReduxのに非常に似ているようだ
• WinAPIのは、ユニークなhWnd identifを使用していますそれは超簡単actionがあなたのために意図されていたかどうかをチェックし、storeにあなたの状態でなければならない場所を決定することができ、各制御のためのIER。
• 上記のアイデアは、おそらくコンポーネントの各タイプは、一意なIDによってインデックスを付け、独自のフラットサブツリーを持つDocumentation suggestion/discussion: Reusing Reducer Logicで説明した何かにつながる可能性があります。上記のリンクリンクされたスレッドにdescibed
• もう一つのアイデアは、親がどこにあるかを決定するreponsibleであることを、かつての成分の特定の型の減速を書き、その後も意味している（それを呼び出す親コンポーネントのための減速をさせることです私にはエルムのアーキテクチャに似ているようだ再び、）
• 提案の詳細は、上記の特定の上記の議論では
• を提示されたものに類似変動する非常に興味深い議論More on reusability for custom components - 子供の状態が配置されている店舗wは、子コンポーネントの「テーブル」のための民間のもののための1つ、およびその他：コンポーネントの状態は、枝の二種類でサブツリーがあることを、このように再帰的に店舗のツリーを整理するために、ユーザーナビゲーションによってa proposition含まれていここで、各子コンポーネントの各クラスには独自の「テーブル」があり、子の各インスタンスにはそのテーブル内の一意のキーがあり、その状態は再帰的に格納されます。これらの子にアクセスできるユニークなキーは「プライベート」セクションに格納されます。これは私がWinAPIを想像する方法と実際に似ています:)
• 別のスレッドによるユーザーsompylasarの別のelm-inspired propositionは、「matrioshka」スタイルのペイロードとして子どものためのアクションを含むアクションを使用することです。これは私の意見では、コンストラクタはElmにネストされています
• redux-subspaceが推奨されましたdiscussion about Global Actionsプリムでは、Elmからインスピレーションを得てグローバルな操作を可能にするライブラリとして。

Answer 1

私はエルムLANGに触発され、活字体に移植されたアイデアの一つを説明しようとします：

のは、我々は、以下の状態

interface ComponentState { 
    text: string 
} 

コンポーネントと非常にシンプルな構成要素を持っているとしましょう以下の2つのアクションで削減することができます。これらの2つのアクションの

interface SetAction { 
    type: 'SET_VALUE', payload: string 
} 

interface ResetAction { 
    type: 'RESET_VALUE' 
} 

タイプ組合（活字体の識別型の労働組合をご覧ください）：

function componentReducer(state: ComponentState, action: ComponentAction): ComponentState { 
    // code 
} 

今まで「埋め込み：これは署名以下THWを持つべきであるため

type ComponentAction = SetAction | ResetAction; 

リデューサー"親コンポーネントにデータモデルをカプセル化するために必要な、より大きなコンポーネントのこの単純なコンポーネント：

interface ParentComponentState { 
    instance1: ComponentState, 
    instance2: ComponentState, 
} 

reduxのアクションタイプはグローバルに一意である必要があるため、両方のインスタンスで処理されるため、コンポーネントインスタンスに対して単一のアクションをディスパッチできません。アイデアの一つは、以下のような手法で親行動に単一のコンポーネントのアクションをラップすることです：

type ParentComponentAction = Instance1ParentAction | Instance2ParentAction; 

そして、この技術の最も重要なこと：

interface Instance1ParentAction { 
    type: 'INSTNACE_1_PARENT', 
    payload: ComponentAction, 
} 

interface Instance2ParentAction { 
    type: 'INSTNACE_2_PARENT', 
    payload: ComponentAction, 
} 

親の行動組合は、次のシグネチャを持つことになります - 親減速機：

function parentComponentReducer(state: ParentComponentState, action: ParentComponentAction): ParentComponentState { 
    switch (action.type) { 
     case 'INSTNACE_1_PARENT': 
      return { 
       ...state, 
       // using component reducer 
       instance1: componentReducer(state.instance1, action.payload), 
      }; 
     // 
    } 
} 

差別化された共用体を使用すると、親子減速機にタイプセーフティが追加されます。