大型应用程序中的动态 React Redux Header 组件 [英] Dynamic React Redux Header component in large application

问题描述

我正在构建一个在整个应用程序中使用的 Header 组件.我正在使用 React 和 Redux (obvz) 来保存 Header 的默认状态，例如在标题减速器的默认状态参数中:

I'm building a Header component which is used throughout my application. I'm using React and Redux (obvz) to hold a default state for the Header e.g. in the header reducer's default state argument:

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

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

This is perfect for all the components where this is true, but for some routes/components I want the header to not show the user menu.

因此，当这些组件安装时，我会向 HIDE_USER_MENU 发送一个操作.

So when those components mount I dispatch an action to HIDE_USER_MENU.

问题在于，因为默认设置为 true，userMenu 最初会在那里，即使在 componentWillMount 中调用 dispatch，也会有一瞬间 userMenu 显示.

The problem is that because the default is set to true, the userMenu will be there initially, and even if the dispatch is called in componentWillMount, there will be a split second where the userMenu shows.

所以没有默认值?但反过来也是如此，它默认不显示菜单，只有在处理完操作后才会出现.

So don't have a default? But then the reverse is true, it defaults to not showing the menu and only appears once the action has processed.

这很好，但它并没有更进一步(以我的示例为例)并解释如何根据路由或组件选择减速器.

This is nice, but it didn't go just a step further (for my example) and explain how the reducer would be chosen based on either route or component.

我也尝试过使用 react-router-redux 触发基于 location.pathname 的动作a>，但即使这样也不会很快发生以避免 FOUH(不需要的标题闪烁！:'( )

I have also tried firing actions based on location.pathname using react-router-redux, but even this does not happen quickly enough to avoid FOUH (flash of unwanted header! :'( )

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

I wondered if there was an established pattern for dynamically loading an initial state, that is guaranteed to appear on initial render.

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

Hope it's clear what I was asking, any help much appreciated!

推荐答案

最简单的方法是让 Header 成为路由的子级.这使得决定要传递哪些道具变得容易:* 您根本不需要存储标题状态 - 路由组件只需将适当的道具(例如 showUserMenu)传递给 Header.

The simplest approach is to have the Header be a child of the route. This makes it easy to decide what props to pass: * You don't need to store the header state at all - the routed component can just pass the appropriate props (such as showUserMenu) to the Header.

但是，它有几个缺点:* 所有路由都必须负责渲染 Header(其实不是问题，有很多方法可以共享代码)* 重新路由时，Header 将被卸载并安装一个新的(因为它的父路由组件被卸载).所以任何 DOM 和 React 状态都将丢失.

However, it has a couple of downsides: * All routes have to take care of rendering the Header (not really a problem, there are lots of ways to share the code) * When re-routing, the Header is unmounted and a new one mounted (since its parent, the route component, is unmounted). So any DOM and React state will be lost.

可以通过为所有路由使用相同的组件类型(可以渲染标题)来避免卸载，但将其传递给 props 以配置适当的路由处理行为(例如子组件).

The unmount could be avoided by using the same component type for all your routes (which could render the header), but pass it props to configure the appropriate route handling behaviour (such as a child component).

另一个(可能是坏的)选项是为您的 Header 状态监听 redux-react-router 的 LOCATION_CHANGE 操作，并基于此更改 showUserMenu 的值.文档似乎不建议这样做，因为由于动态路由加载等原因，在实际渲染新路由之前可能存在一些异步性，但它可能适用于正常情况.

Another (probably bad) option is for your Header state listen for redux-react-router's LOCATION_CHANGE action, and change the value of showUserMenu based on that. The documentation appears to advise against this, since there can be some asynchronicity before the new route is actually rendered due to dynamic route loading, etc., but it probably works fine for the normal case.

这篇关于大型应用程序中的动态 React Redux Header 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！