ngrx - 与仅使用 Angular 2 路由器相比，了解 ngrx router-store 项目的目的

Question

我指的是router-store ngrx项目 (https://github.com/ngrx/router-store)。

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

例如，让我们从项目文档中获取以下示例:

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

这是否意味着用作 Angular 2 路由器的替代品:router.navigate(['/path... ？

...或者我应该仅在某些情况下使用 ngrx 路由器存储？ (如果有的话是哪些？)

当 Angular 2 路由器 html 链接(例如)时，ngrx 路由器存储会发生什么？ <a routerLink="/heroes"被点击了？

更一般地说，有人可以解释一下 ngrx router-store 项目与使用普通 Angular 2 路由器相比实现了什么吗？

或者换句话来说，除了 Angular 2 路由器之外，ngrx router-store 还带来了什么？

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

我在那里发现了对路由器存储的依赖，但我无法找到应用程序中使用路由器存储的位置...

仅供引用，以下是示例应用程序中有关路由器存储的注释:

@ngrx/router-store keeps router state up-to-date in the store and uses the store as the single source of truth for the router's state.

Answer 1

@ngrx/router-store存在，因此商店可能是 single source of truth应用程序的路由状态。

没有它，应用程序状态 - 当前路由 - 不会在商店中表示。这意味着使用 DevTools 进行时间旅行调试这是不可能的，因为商店中没有代表路线的状态，也没有代表路线更改的操作。

router-store 不会取代 Angular 路由器；它只是为路由操作和路由器本身连接监听器。

当您使用 go action creator 发出路由操作时，router-store 听到包含指定路径的 "[Router] Go" 操作，然后调用相应的路由器方法。当router-store从路由器处听到路由已更改时，它会发出一个表示路由更改的“[Router] Update Location”操作，并且该操作会看到商店中的路由器状态已更新。

如果不使用 go 操作创建器，而是使用 routerLink 来实现路由更改，router-store 将听到更改并将发出“[Router] Update Location”操作，该操作将看到商店的路由器状态已更新。

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

使用表示路由更改的“[Router]更新位置”操作，您可以通过DevTools撤消所述路由更改 - 如果存储中未表示路由器状态，则这是不可能的.

如果您还没有使用过 Redux DevTools，我建议您查看一下:

• Redux DevTools Extension
• @ngrx/store-devtools
• @ngrx/store-log-monitor