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

Understanding the purpose of the ngrx router-store project as compared to only using the angular 2 router

我参考了 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 link 例如<a routerLink="/heroes" 被点击了?

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

或者换句话说,除了 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.

应用程序的路由状态 @ngrx/router-store exists so that it's possible for the store to be the single source of truth

没有它,应用程序状态 - 当前路由 - 不会在商店中显示。这意味着 time-travel 无法使用 DevTools 进行调试,因为商店中没有表示路由的状态,也不会有表示路由更改的操作。

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

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

如果不使用 go 动作创建器,而是使用 routerLink 来影响路线更改,router-store 将听到更改并发出 "[Router] Update Location" 将看到商店的路由器状态更新的操作。

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

使用表示路由更改的 "[Router] Update Location" 操作,您可以通过 DevTools 撤消所述路由更改 - 如果路由器状态未在商店中显示,则无法执行此操作。

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

一个例子。

假设您有一个在路由器状态下传递的 selected id。该 ID 引用了一个客户。

您的 url 看起来像这样:myapp.com/customers/7755664

当您路由到客户编辑视图时,您可以编写一个 selector 来使用路由器状态中的 id 获取客户实体。假设您想滚动浏览客户。您导航到 myapp.com/customers/7755653。 select 或 returns 客户,select 调用发出并且您的视图重新呈现新客户。

它简化了 selectors 并取代了在您的州拥有 selectedcustomer 属性 的需要。