Reduxを使用して、ルートのReactコンポーネントと他のアプリケーション間の通信方法を教えてください。

Question

アラートを処理するアプリケーションのルートにコンポーネントがレンダリングされています。
私はどこでも私のアプリ内からそのコンポーネントに異なるメッセージを渡し、（受け入れるか、例えば拒否）、ユーザが選択したアクションを取得できるようにしたいです。
そのコンポーネントは他のコンポーネントの子ではないので、コールバックをプロップとして渡すことはできません。
は私が主な理由は、マークアップ組織のそれをレンダリングする必要があるすべてのコンポーネント上に「インスタンス」というコンポーネントを望んでいません。
これを達成するための良いパターンは何ですか？アボートコンポーネントからディスパッチする必要があるアクションを呼び出しアクション自体に渡す必要がありますか？

Answer 1

あなたがReduxを使用している場合。オブジェクトを返すファンクションmapStateToPropsと、コンポーネントを格納するためのヘルパーファンクションconnectを使用するだけです。 componentsは、Reduxストア内の状態が変更されたときに、自身の小道具として状態を受け取ります。すなわち、あなたがアクションを作用と減速は、されたコンポーネントは、それが（それ自体を考えて）のでが再度レンダリングされる接続（変更）ストア内の新しい値が返さ新しい小道具を受けました。

たとえば、あなた再来店（シングルトン）

{ 
    alerts: [{ 
      id: 1001, 
      message: "Hello", 
      userAct: "Accepted", 
      custType: "fromCompA", 
      }, 
      { 
      id: 1002, 
      message: "World", 
      userAct: "Declined" 
      custType: "fromCompB", 
      cb: function(){} 
      }], 
    others: {}, 
} 

mapStateToProps

const mapStateToProps = state => { 
    return { 
    alerts: state.alerts || [] 
    } 
} 

は

export default connect(mapStateToProps, { 
    addAlert, 
})(YourComponent) 

を接続しています

あなたはどのコンポーネントがそれを呼び出しに応じて異なるアクションを実行する場合

UPDATE、あなたはあなたの店のオブジェクトにcustom typeまたはコールバックを追加することができます。

は、その後、あなたは、このようなカスタムタイプのアクションの作成者を使用することができます

const addAlert = (paramIsObjContainsCustType, param2, custType) => (
    { 
    type: "YOUR_ACTION_TYPE", 
    payload: { 
     message: param2, 
     custType, 
    } 
) 

（あなたはのparamオブジェクトにcustTypeを置くことができ、すべての。あなたの設計に依存）そして、あなたのコンポーネントが警告オブジェクトを取得することができますし、 object.custType（この例では）。それで、あなたはその価値に応じて何かをすることができます。以下@aziumのコメント投稿者

、コールバックの方法は、タイムトラベルのような再来のいくつかの機能を逃すことがあります。したがって、店舗にcustTypeのようなメタデータを残して、それに応じて反応させることが、あなたが望むことを行うためのより良い方法になるはずです。私たちは店をシリアル化したいとき

や店舗での機能を維持するにもいくつかの問題が発生することがあります。シリアル化を行うと、関数はnullになる可能性があります。