大型应用程序中的 Dynamic React Redux Header 组件

Question

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

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

这对于所有组件都是完美的，但对于某些 routes/components 我希望 header 不显示用户菜单。

因此，当这些组件挂载时，我会向 HIDE_USER_MENU 发送一个操作。

问题是，因为默认设置为true，userMenu最初会在那里，即使在componentWillMount中调用调度，也会有一瞬间userMenu 显示的位置。

所以没有默认值？但反之亦然，它默认不显示菜单，只有在操作完成后才会显示。

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

我也尝试过使用 react-router-redux 基于 location.pathname 触发动作，但即使这样也没有足够快地发生以避免 FOUH（不需要的 header 的闪光！:'( )

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

希望我问的很清楚，非常感谢任何帮助！

Answer 1

最简单的方法是让 Header 成为路线的 child。这使得决定传递哪些道具变得容易： * 您根本不需要存储 header 状态 - 路由组件只需将适当的道具（例如 showUserMenu）传递给 Header。

但是，它有几个缺点： * 所有路由都必须负责呈现 Header（这不是真正的问题，有很多方法可以共享代码） * 当 re-routing 时，Header 被卸载并安装一个新的（因为它的 parent，路由组件被卸载）。所以任何 DOM 和 React 状态都将丢失。

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

另一个（可能不好的）选项是针对您的 Header 状态侦听 redux-react-router 的 LOCATION_CHANGE 操作，并根据此更改 showUserMenu 的值。该文档似乎建议不要这样做，因为由于动态路由加载等原因，在实际呈现新路由之前可能存在一些异步性，但它可能适用于正常情况。

大型应用程序中的 Dynamic React Redux Header 组件

Dynamic React Redux Header component in large application

reactjs

redux

react-redux