Question

我正在构建一个在我的应用程序中使用的Header组件。我正在使用React和Redux（obvz）来保持Header的默认状态，例如在header reducer的默认状态参数中：

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

这对于所有正确的组件都是完美的，但对于某些路由/组件，我希望标题不显示用户菜单。

所以当这些组件挂载时，我会向HIDE_USER_MENU发送一个动作。

问题在于，因为默认设置为true，userMenu最初会在那里，，即使在componentWillMount 中调用了调度，userMenu也会显示分秒。

所以没有默认值？但事实恰恰相反，它默认不显示菜单，只在动作处理后才会出现。

This is nice，但它没有更进一步（对于我的例子）并解释如何根据路线或组件选择减速器。

我还尝试使用react-router-redux基于location.pathname触发操作，但即使这样也不会很快发生以避免FOUH（不需要的标题闪现！：'（）

我想知道是否存在动态加载初始状态的既定模式，保证在初始渲染时出现。

希望我明白我的要求，任何帮助都非常感谢！

Answer 1

最简单的方法是让Header成为路线的孩子。这样可以轻松确定要传递的道具： *您根本不需要存储标题状态 - 路由组件只需将适当的道具（例如showUserMenu）传递给标题。

然而，它有几个缺点： *所有路由都必须处理渲染Header（不是真的有问题，有很多方法可以共享代码） *重新路由时，卸载Header并挂载一个新的Header（因为它的父节点，路由组件已卸载）。因此任何DOM和React状态都将丢失。

可以通过对所有路由使用相同的组件类型（可以呈现标头）来避免卸载，但是传递它来配置适当的路由处理行为（例如子组件）。

另一个（可能是坏的）选项是你的Header状态监听redux-react-router的LOCATION_CHANGE动作，并根据它改变showUserMenu的值。文档似乎反对这一点，因为在新路由实际呈现之前可能存在一些异步性，这是由于动态路由加载等原因，但它可能适用于正常情况。