与仅使用angular 2路由器相比，了解ngrx路由器存储项目的目的 [英] 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 ).
我不清楚如何使用该项目...
I am not clear how to use this project...
例如，让我们从项目文档中获取以下示例:
For instance let's take the following sample from the project documentation:
store.dispatch(go(['/path', { routeParam: 1 }], { query: 'string' }));
这是要用作2角路由器的替代品吗?router.navigate(['/path...?
Is this meant to be use as a replacement to the angular 2 router: router.navigate(['/path...?
...还是仅在某些情况下才应使用ngrx路由器存储? (如果是这样的话?)
...or should I use the ngrx router-store only in certain circumstances? (if so which ones?)
当有角度的2个路由器html链接时，例如ngrx路由器存储也会发生什么情况. <a routerLink="/heroes"被点击了吗?
Also what happens to the ngrx router-store when a angular 2 router html link e.g. <a routerLink="/heroes" is clicked?
更一般地说，有人可以解释一下ngrx路由器存储项目与使用普通角度2路由器相比有什么成就吗?
More generally, can someone please explain what is achieved by the ngrx router-store project as compared to using the plain angular 2 router?
或者换句话说，除了有角度的2路由器之外，ngrx路由器商店还带来了什么?
Or to rephrase, what does ngrx router-store brings in addition to the angular 2 router?
编辑:有关ngrx的信息和示例的有趣来源当然是ngrx example-app( https://github.com/ngrx/example-app ).
Edit: An interesting source of information and samples about ngrx is of course the ngrx example-app (https://github.com/ngrx/example-app).
我找到了那里的路由器存储的依赖项，但是我无法找到应用程序中路由器存储的位置...
I found a dependency to the router-store there but I have not been able to find where the router-store is used within the app...
仅供参考，以下是在示例应用中有关路由器存储的注释:
FYI, here is the comment to be found in the example app about the router store:
@ ngrx/router-store使路由器状态在存储中保持最新，并且 将商店用作路由器状态的唯一真实来源.
@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 存在，因此商店有可能成为单一来源表示应用程序的路由状态.
The @ngrx/router-store exists so that it's possible for the store to be the single source of truth for an application's routing state.
没有它，将存在应用程序状态-当前路由-商店中未显示.这意味着无法使用 DevTools 进行时间调试，因为商店中没有代表路线的状态，也没有代表路线变化的动作.
Without it, there would be application state - the current route - not represented in the store. That means time-travel debugging using the DevTools would not be possible, as there would be no state in the store representing the route and there would be no actions representing route changes.
router-store不能代替Angular路由器；它只是将侦听器连接起来，以路由操作和路由器本身.
The router-store does not replace the Angular router; it just wires up listeners for routing actions and for the router itself.
当您使用发出路由操作时go动作创建者，router-store会听到包含指定路径的"[Router] Go"动作，然后调用相应的路由器方法.当router-store从路由器听到-路由已更改时，它发出表示路由更改的"[Router] Update Location"操作，并且该操作看到更新的存储中的路由器状态.
When you emit a routing action using the go action creator, a "[Router] Go" action containing the specifed path is heard by the router-store which then calls the corresponding router method. When the router-store hears - from the router - that the route has changed it emits a "[Router] Update Location" action representing the route change and that action sees the router state in the store updated.
如果使用routerLink而不是使用go动作创建器来实现路由更改，则router-store将听到更改并发出"[Router] Update Location"动作，该动作将看到商店的路由器状态已更新
If, instead of using the go action creator, a routerLink is used to effect a route change, router-store will hear the change and will emit a "[Router] Update Location" action that will see the store's router state updated.
因此，无论是通过操作还是通过更传统的链接来更改路由，存储区始终包含路由器状态.
So, whether the route is changed via actions or more traditional links, the store always contains the router state.
使用"[Router] Update Location"动作表示路由更改，您可以通过DevTools撤消所述路由更改-如果商店中未显示路由器状态，则无法实现.
With the "[Router] Update Location" actions representing route changes, you can undo said route changes via the DevTools - something that would not be possible if the router state were not represented in the store.
如果您尚未使用Redux DevTools，建议您将它们检出:
If you've not used the Redux DevTools, I would recommend you check them out:
- Redux DevTools Extension
- @ngrx/store-devtools
- @ngrx/store-log-monitor
这篇关于与仅使用angular 2路由器相比，了解ngrx路由器存储项目的目的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
