同じページの他のReactアプリからのReactアプリケーションへのアクセス

Question

私はマイクロサービスとして自分のウェブサイトのフロントエンドを書いた状況があります。私のウェブサイトの各機能セクションは、cssとhtmlにバンドルされた反応生息地のアプリケーションです。私はこれをやったので、私がサイト上のどこででもこれらのセクションを再利用することができます。

私の問題はチェックアウトの領域では、ログインアプリケーション（成功した応答）からcustomerIdを配信アドレスアプリケーションに渡す必要があるため、デフォルトのアドレスに戻すことができます。新しいアプリケーションを作成し、ログインと配信アドレスアプリケーションのコードを複製する必要はありません。なぜなら、Webサイトのどこかでそれらを使用する必要があるからです。

だから私の質問です。ページの再読み込みを行わずに、このカスタマーIDをログインアプリケーションから配送先住所アプリケーションに渡すにはどうすればよいですか？その反応アプリケーションの外部から反応アプリケーションメソッドにアクセスする方法はありますか？

ログインクリックハンドラ：

clickHandler(e) { 
    e.preventDefault(); 
    let payload = {"email":this.props.email, "password":this.props.password}; 

     AuthenticationApp.login(payload).then((response) => { 
      if (this.props.referrer === "checkout") { 
       $("#checkout_login-register-tab").addClass("done"); 
       $("#checkout_login-delivery-tab").removeClass("todo"); 

       // Temporary hack to reload page until we can pass new user session into delivery/billing react app from here. 
       location.reload(); 
      } 
      this.props.updateParentState({isLoggedIn: true}); 
     }) 
     .catch(function(response){ 
      console.log("res2 - catch", response) 
     }); 
    } 

配信アドレスのアプリケーションが再レンダリングし、サービスから得意先拾うので、私はこちらのページのリロードを強制しています。何らかの形で関数にアクセスしたり、アプリケーションを強制的にリセットしたりして、この別のアプリケーションからこの段階で配信アプリケーションを再レンダリングする方法が必要ですか？これは可能ですか、またはページリロード以外の回避策がありますか？

Answer 1

あなたはこのような何かを行うことができます。

ここ

loadDeliveryApp(data) { 
    ReactDOM.render(<DeliveryApp data={data} />, document.getElementById('delivery-app')) 
    ReactDOM.unmountComponentAtNode(document.getElementById("login-app")) 
} 

clickHandler(e) { 
    e.preventDefault() 
    // your login stuff 

    loadDeliveryApp(data) 
} 

は、作業のデモです。

https://codepen.io/madhurgarg71/pen/dzgxMd

Answer 2

私は..すべてのアプリケーションは、フラックス観測やReduxのようなもののいずれかを介してお互いに話をすることができますリアクト生息地の原作者です。

私は、生息地の状況で死んだコードを持つ可能性のある1つのBIGストアではなく、個々のストアが軽量に保たれているので、通常は反応生息地のためにfluxを提案します。

両方のアプリケーションをインポートする共通ストアを1つ作成する必要があります。共通ストアは、一方が変更された場合は他方が更新を取得するようにインポートされます。私はそれが助けば後で一緒にデモを置くことができます。