大型应用程序中的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组件

回答

相关问题