与仅使用angular 2路由器相比,了解ngrx路由器存储项目的目的

时间:2017-02-03 16:24:22

标签: ngrx

我参考了路由器商店ngrx项目https://github.com/ngrx/router-store)。

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

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

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

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

...或者我应该只在某些情况下使用ngrx路由器存储? (如果是那些?)

当角度2路由器html链接时,ngrx路由器存储会发生什么?点击了<a routerLink="/heroes"

更一般地说,与使用普通的角度2路由器相比,有人可以解释一下ngrx路由器商店项目取得的成果吗?

或者换句话说,除了角度2路由器之外,ngrx路由器商店还带来了什么?

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

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

仅供参考,这里是关于路由器商店的示例应用程序中的注释:

  

@ ngrx / router-store使路由器状态在商店中保持最新状态   使用商店作为路由器状态的唯一真实来源。

2 个答案:

答案 0 :(得分:63)

存在@ngrx/router-store,以便商店可以成为应用程序路由状态的single source of truth

没有它,将会有应用程序状态 - 当前路径 - 未在商店中显示。这意味着使用DevTools的时间旅行调试是不可能的,因为商店中没有表示路线的状态,也没有表示路线变化的动作。

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

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

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

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

使用表示路由更改的Service操作,您可以通过DevTools撤消所述路由更改 - 如果路由器状态未在商店中显示,则无法实现。

如果您还没有使用Redux DevTools,我建议您查看它们:

答案 1 :(得分:0)

一个例子。

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

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

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

它简化了选择器,并取代了在您的状态下具有selectedcustomer属性的需求。

相关问题