大型應用程序中的Dynamic React Redux Header組件

我正在構建一個在整個應用程序中使用的Header組件。我正在使用React和Redux（obvz）來爲Header保存默認狀態，例如在頭減速機的默認狀態參數：大型應用程序中的Dynamic React Redux Header組件

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

這是完美的地方所有這是真實的成分，但部分航線/組件我想頭不顯示用戶菜單。

所以，當這些部件安裝我派遣HIDE_USER_MENU動作。

的問題是，因爲默認設置爲true，則userMenu的將在那裏開始，即使派遣被稱爲componentWillMount，會有一秒鐘，其中顯示userMenu的。

所以沒有默認？但是反過來卻是如此，它默認不顯示菜單，只有在處理完成後纔會出現。

This is nice，但它沒有更進一步（對我的例子），並解釋瞭如何根據路徑或組件選擇減速器。

我也曾嘗試使用react-router-redux射擊基於location.pathname行動，但即使這並不足夠快的速度發生，以避免FOUH（無用頭的閃光！「（）

我想知道是否有一個既定的模式爲動態加載初始狀態，這是保證出現在最初的渲染。

希望很清楚我是問，非常感謝您的幫助！

來源

2016-12-02 jamieallen59

最簡單的方法是讓標題中的孩子路線，這可以很容易地決定通過什麼道具： *根本不需要存儲標題狀態 - 路由組件只需將相應的道具（如showUserMenu）傳遞給標題。

但是，它有兩個缺點： *所有線路必須採取渲染頁眉的護理（不是一個真正的問題，有很多的方式來共享代碼） *當重新路由，頁眉被卸載，並掛載一個新的（因爲其父路由組件被卸載）。所以任何DOM和React狀態都會丟失。

的卸載可以用你所有的路線相同的組件類型（這可能使頭），但它傳遞道具配置相應的路由處理行爲（如子組件）是可以避免的。

另一個（可能是壞的）選項是你的頭狀態監聽終極版 - 反應 - 路由器的LOCATION_CHANGE行動，並改變showUserMenu的基礎上的價值。該文檔似乎建議不要這樣做，因爲在實際上由於動態路由加載等原因而呈現新路由之前可能會存在一些異步性，但它對於正常情況可能正常工作。

來源

2016-12-02 11:18:10 TomW

謝謝你的想法湯姆！我知道我可以在每個組件中呈現標題，但這正是我試圖擺脫這種情況的原因。有一個頭部呈現在50多個組件的所有具有不同的配置是痛苦的非DRY :(當我提到基於location.pathname使用react-redux-router的射擊動作時，我使用了history.listen，例如LOCATION_CHANGE。你暗示），這有相同的效果。我也嘗試在高階組件中包裝標題，同樣的問題... – jamieallen59

如果所有的組件都有不同的配置，那麼就沒有任何重複;）！儘管如此，包括如果你把所有東西都分解到像StandardScreen這樣的組件中（例如，一條路由可能是'），那麼這就是路由的配置，而不是重複。也就是說，你幾乎可以肯定需要在某些時候更新存儲狀態作爲路由的一部分：如果你使用history.listen並讓回調調度你自己的routeChanged動作，這是否會給你一個可行的鉤子來更新你的商店狀態呈現？ – TomW

對不起，我們走了！我明白你的意思，但對我來說，這正是Redux的職責所在：在整個應用程序中處理狀態，這正是我正在嘗試使用的方式。所以你知道，我更新狀態的代碼已經在history.listen回調中了，例如：'history.listen（location => dispatch（hideUserMenu（）））; 「那裏有一些有條件的東西來檢查我在哪條路線上，但就是這樣！ – jamieallen59

大型應用程序中的Dynamic React Redux Header組件

回答

相關問題