大規模アプリケーションのDynamic React Reduxヘッダコンポーネント

Question

私はアプリケーション全体で使用されるヘッダコンポーネントを構築しています。私はReactとRedux（obvz）を使ってヘッダのデフォルト状態を保持しています。ヘッダ減速のデフォルトの状態の引数に：

state = { 
    showUserMenu: true, 
    redirectUrl: '/' 
} 

これは、これが本当であるすべてのコンポーネントに最適ですが、いくつかのルート/コンポーネントのために私はないにヘッダをしたいユーザメニューが表示されます。

これらのコンポーネントをマウントすると、私はHIDE_USER_MENUにアクションをディスパッチします。

問題は、デフォルトがtrueに設定されているため、userMenuは、当初は存在しと発送はcomponentWillMountに呼び出された場合でも、userMenuは示し一瞬があるだろうということです。

デフォルトはありませんか？しかし、その逆は真です。デフォルトではメニューが表示されず、アクションが処理されると表示されます。

This is niceが、それは（私の例のために）だけでさらに一歩進み、減速機は、ルートまたはコンポーネントのいずれかに基づいて選択されるであろう方法を説明していませんでした。

私もreact-router-reduxを使用してlocation.pathnameに基づいてアクションを発射しようとしているが、それでもこれはFOUH（不要なヘッダのフラッシュを避けるために十分に迅速に発生しません：！ '（）

確立があった場合、私は疑問に思いました動的に初期状態をロードするためのパターン、それはレンダリングの初期に現れることが保証される。

は、任意のヘルプは感謝、私が求めていたものを明確に願っています！

Answer 1

最も簡単な方法は、ヘッダーはの子であることですこれにより、通過する小道具を簡単に決めることができます。 *ヘッダーステートをまったく格納する必要はありません。ルーティングされたコンポーネントは、適切な小道具（showUserMenuなど）をヘッダーに渡すだけです。

しかし、それは欠点のカップルを持っている： *すべてのルートは、ヘッダーレンダリングの世話をする必要があります（ない本当に問題を、コードを共有する方法はたくさんあります） を*再ルーティング、ヘッダーを（ルートコンポーネントがアンマウントされているので）マウントされ、新しいマウントされたものがマウントされます。したがって、DOMとReactの状態は失われます。

すべてのルートで同じコンポーネントタイプを使用すると（ヘッダーをレンダリングすることができます）、親プロセスに渡して、適切なルート処理の動作（子コンポーネントなど）を構成します。

もう1つ（おそらく悪い）のオプションは、あなたのヘッダー状態がredux-react-routerのLOCATION_CHANGEアクションをリッスンし、それに基づいてshowUserMenuの値を変更するためのオプションです。新しいルートが実際に動的なルートの読み込みなどによってレンダリングされる前にいくつかの非同期性が存在する可能性があるため、ドキュメントはこれに対して助言するように見えますが、通常の場合はおそらくうまく動作します。