NgRx:选择器在过渡到另一个页面时被调用

我是NgRx的新手。经过一堆阅读后,我将路由器(if(auth.getcurrentUser() != null){ String email = auth.getcurrentUser().getEmail(); tt1.setText(email); })添加到了应用程序状态以访问选择器中的router参数。我正在将@ngrx/router-storeCustomRouterSerializer一起使用。从那时起,我遇到了一个问题,例如,当我从详细信息页面( / hero /:heroId )导航到列表页面( / )时,将会调用详细信息页面中的RouterState.Minimal选择器,这会导致其他问题。当然,我可以将空支票放入...

但是,由于我是初学者,所以我认为最好问一下。在过渡到另一页时调用getSelectedHero似乎是错误的。确定路由器状态正在改变,但是?

我花了一些时间试图找到不包含未定义检查的解决方案。

我创建了一个演示该问题的“超级”应用程序。我将其推至GitHubStackBlitz

这是详细信息页面( / hero /:heroId )中的选择器代码,当离开该页面时会被调用。

getSelectedHero

在详细信息页面中(/ hero /:heroId)我使用以下内容:

export const getSelectedHero = createSelector(
  selectHeroesState,  getRouteState,  (state,router) => {
    const hero = state.entities[router.state.params.heroId];
    // FixMe: simplifies the problem... hero is undefined if you navigation for /hero/:heroId to / and following line will throw an error.
    console.log("getSelectedHero",hero,hero.id,hero.name); 
    return hero;
  }
);
lovejiazhen 回答:NgRx:选择器在过渡到另一个页面时被调用

问题是,当您导航到其他路线时,路线参数:heroId不可用。

例如,当您导航到英雄页面.../hero/2时,路径参数:heroId可用,因为您已经定义了路径hero/:heroId;

当您导航到根页面.../时,路由与""匹配,这将导致未设置路由参数:heroId(在选择器上显示为未定义)>

const hero = state.entities[router.state.params.heroId]; // <-- here "router.state.params.heroId" is undefined

由于您的getSelectedHero使用了路由状态选择器getRouteState,因此每次发生路由更改并且hero$下的订阅处于活动状态时,getSelectedHero将被调用。

解决您可以做到的:

if (router.state.params.heroId === undefined) return {};

或者您可以将选定的heroId变量移至英雄状态,这样导航不会触发英雄数据选择

本文链接:https://www.f2er.com/3133962.html

大家都在问