Question

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

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

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

我知道另一种方法是订阅组件中的Router params并以这种方式添加通知。我仍然可以通过商店调度创建通知，但组件中将存在该逻辑，其中所有其他类似逻辑都在商店中。所以这似乎不是正确的方法。有没有其他方法可以实现此功能？

Answer 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
                ) 
            : [];
  }
);

通过订阅，我的组件只会知道与路由器网址/item/:id

中显示的项ID相匹配的未读通知

在路线变更中使用ngrx在Angular应用程序中发送通知

1 个答案: