在 Angular 应用程序中使用 ngrx 进行路由更改的调度通知答案

【问题标题】：Dispatch Notification in Angular app using ngrx on Route Change在 Angular 应用程序中使用 ngrx 进行路由更改的调度通知
【发布时间】：2018-02-11 19:25:53
【问题描述】：

我有一个使用ngrx 的Angular 应用程序。这是我的第一个 ngrx 应用程序，所以我正在快速学习。我设置了动作、reducers 和效果，以将项目添加到数据库并更新这些项目，并且一切正常。我的流程是，当他们想创建一个新项目时，他们会去/item/new。填写完表格后，他们会转到/item/:id。我使用相同的组件来添加/更新项目，如果您正在更新，它只会更改 URL 以添加 id。很基本的东西。

我添加到 ItemState 中的一件事是在添加/更新项目时可以添加和删除的通知数组。当他们离开项目详细信息页面时，无论是在更新还是添加项目时，我都会从状态中删除所有通知。我选择这样做是因为否则当您返回另一个详细信息页面或项目列表页面时，通知会在那里。但我不希望这种情况发生。所以在OnDestroy 中，我调度了那个动作。它在更新项目以收听 UpdateItemSuccess 操作以添加通知时非常有效，因为我在更新后不会离开 /item/:id 页面。

但是在添加一个项目之后，我会通过从/item/add 转到/item/:id 导航到一个新页面。因此，如果添加了通知，则会立即删除该通知。所以我的想法是，在重定向时，我可以在 URL 中添加一些内容，例如 #itemAdded=true 或 ?itemAdded=true，我可以抓取、添加通知并从 URL 中删除。因此，我为routerStore.Go 操作添加了一个效果，以查看有效负载以检查该信息，但无法弄清楚如何检查该信息，然后让它继续其路由。它还必须做其他事情，因为页面会变得无响应，我不得不退出 Chrome 并重新启动它。 :)

我知道另一种方法是订阅组件中的路由器参数并以这种方式添加通知。我仍然可以通过商店发送创建通知，但是组件中会有那个逻辑，所有其他类似的逻辑都在商店中。所以这似乎不是正确的方法。还有其他方法可以实现此功能吗？

【问题讨论】：

标签： angular ngrx

【解决方案1】：

不确定我是否理解正确，但我认为在 选择器 级别可以更好地处理这种逻辑。如果我们假设有一个给定状态的通知数组：

export interface AppState {
    ...
    notifications: Notification[];
}

然后我会将通知视为实体，并尝试将它们链接到各自的项目，并可能会提供有关它们是否已读取的额外信息，以防我想在某处发送操作以禁用它们：

export interface Notification {
    itemId?: number;
    message?: string;
    read?: boolean;
}

然后，我不会让我的组件监听 getAllNotifications 选择器，而是创建一个子选择器，如下所示：

export const getSelectedNotifications = createSelector(
  getAllNotifications,
  fromRoot.getRouterState,
  (notifications, router): Notification[] => {
    return 
        router.state && router.state.params.id 
            ? notifications.filter(
                notif => 
                    notif.itemId === router.state.params.id 
                    && notif.read === false
                ) 
            : [];
  }
);

通过订阅它，我的组件将只知道与路由器 url /item/:id 中存在的项目 id 匹配的未读通知

【讨论】：