reactjs - React mfe: mfe 間の通信

Question

反応17で、mfeデモで試しています。Header と Auth の 2 つの mfe を含む親コンテナーがあります。

ユーザーがログインすると、コンテナーに通知されます。この通知を受け取ると、ヘッダー コンポーネントはこのイベントについて通知される必要があり、それ自体を更新できます。

現在、コンテナーはAuth-mfeからメッセージを取得できましたが、ヘッダーコンポーネントがコンテナーを使用してこれをサブスクライブする方法に問題がありました。

目標は、mfe 間の直接通信を最小化または排除することであり、必要に応じて、親コンテナーを経由する必要があります。

状態を保存するためにreduxやサードパーティのライブラリを使用していません。ユーザーセッションの詳細は現在、Auth-mfeによって sessionStorage に保存されています。

コンテナ app.js スニペットは

function App() {
return (
    <BrowserRouter>
            <div>
                <Header notifySignedIn={notifySignedIn} />
                <Suspense fallback={<Progress />}>
                    <Switch>
                        <Route path="/auth" render={props => (<AuthLazy onSignin={onSignin} {...props} /> )} />
                    </Switch>
                </Suspense>
                <Footer />
            </div>
    </BrowserRouter>
);

}

デフォルトのアプリをエクスポートします。