子ウィンドウからアクションをディスパッチする方法は？

Question

私はカスタムSSOサービスを実装していますが、うまくいきますが、このページにリダイレクトするのではなく、ユーザー権限を要求するポップアップを開きたいと思います。

問題は、ユーザーが自分のアカウントへの接続を承認または拒否したときに、親ウィンドウ（Webアプリケーション）を更新してポップアップ（承認）を閉じる必要があることです。

だから私は、その状態を更新するために、私の親ウィンドウに私のポップアップからアクションを派遣について考えて何かした

componentWillMount() { 
    window.opener.loginSuccess(this.props.user); 
} 

しかし、私は、ウィンドウオブジェクトから任意のアクションが表示されません。 この機能はどのように実装できますか？

Answer 1

あなたが行動を望んで必要な派遣するloginSuccess方法にオープナーウィンドウへの参照を追加することができます

const store = redux.createStore(reducer); 
window.loginSuccess = function(user) { 
    store.dispatch(sampleActionCreator(user)); 
}; 

は今、あなたは子供から window.opener.loginSuccess()にアクセスすることができます。

Answer 2

私のプロジェクトでは、トリガする親コンポーネントにポップアップ/モーダルなどを管理し、パラメータなどをポップアップに渡します。 ポップアップページはプレゼンテーションの責任を負います。すべての動作（サービスレイヤからのサービスコール、reduxバインド）は私の親コンポーネントにあります。

私はsthを変更する必要があるので、私はbehaviors（funcs）とpropsをポップアップに渡します。私はちょうど還元状態を更新します。 reduxのようなデータ指向アーキテクチャーを使用する場合は、コンポーネントの管理が容易です。

私はあなたにお勧めします。独自の行動、独自の行動を持つ行動コンポーネントのようなダミーのプレゼンテーションコンポーネントは使用しないでください。

Answer 3

親ウィンドウと子ウィンドウの間にmessaging APIを使用できます。 リンク内の例を見て、受信したいメッセージにイベントリスナーを実装する必要があることに注意してください。それに応じてアクションをディスパッチできます。