理解ngrx router-store项目的目的与仅使用Angular 2路由器的区别

Question

理解ngrx router-store项目的目的与仅使用Angular 2路由器的区别

62

我参考了 router-store ngrx 项目 (https://github.com/ngrx/router-store)。

我不清楚如何使用这个项目...

例如，让我们看一下项目文档中的以下示例:

store.dispatch(go(['/path', { routeParam: 1 }], { query: 'string' }));

这是用来替换angular 2路由器使用的吗：router.navigate（['/path ...？

还是我只在某些情况下使用ngrx router-store？（如果是这样，哪些情况？）

此外，当点击一个angular 2路由器html链接时，例如<a routerLink="/heroes"，ngrx路由器商店会发生什么？

更一般地说，请有人解释一下与使用简单的angular 2路由器相比，ngrx路由器商店项目实现了什么？

或者重新表述一下，ngrx路由器存储除了angular 2路由器之外还带来了什么？

编辑：关于ngrx的信息和示例的有趣来源当然是ngrx example-app (https://github.com/ngrx/example-app)。

我在那里找到了一个依赖项，但我没有找到在应用程序中使用路由器存储的位置...

FYI，在示例应用程序中可以找到有关路由器存储的注释：

@ngrx/router-store将路由器状态保持最新并使用存储作为路由器状态的唯一真相来源。

- balteo

2个回答

0

一个例子。

假设您有一个选择的ID，将其传递到路由器状态中。该ID引用了一个客户。

您的URL看起来像这样：myapp.com/customers/7755664

当您路由到客户编辑视图时，可以编写一个选择器，使用来自路由器状态的ID获取客户实体。假设您想滚动查看客户。您导航到myapp.com/customers/7755653。选择器返回客户，选择调用发出并且您的视图使用新客户重新呈现。

它简化了选择器，并替换了在状态中具有selectedcustomer属性的需要。

- Derek Kite

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cartant · Accepted Answer

@ngrx/router-store的存在使得应用程序的路由状态成为存储库的单一数据源成为可能。

如果没有它，将会有应用程序状态——当前路由——在存储库中没有被表示。这意味着使用DevTools进行时间旅行调试是不可能的，因为存储库中没有代表路由的状态，也没有代表路由更改的操作。

router-store并不替代Angular路由器；它只是为路由动作和路由器本身连接监听器。

使用 go action creator 发出路由操作时，router-store 会收到包含指定路径的 "[Router] Go" 操作，并调用相应的路由方法。当 router-store 从路由器那里听到路由已更改时，它会发出一个表示路由更改的 "[Router] Update Location" 操作，并更新存储中的路由器状态。

如果使用 routerLink 来更改路由，而不是使用 go 操作创建器，则 router-store 将听到更改并发出一个 "[Router] Update Location" 操作，将更新存储的路由器状态。

因此，无论是通过操作还是传统链接更改路由，存储始终包含路由器状态。

通过表示路由更改的 "[Router] Update Location" 操作，您可以通过 DevTools 撤消该路由更改 - 如果路由器状态未在存储中表示，这将是不可能的。

如果你没有使用过Redux DevTools，我建议你去试试：