首页 文章

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

提问于
浏览
35

我参考了 router-store ngrx projecthttps://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路由器商店还带来了什么?

Edit :有关ngrx的有趣信息和样本来源当然是ngrx example-app(https://github.com/ngrx/example-app) .

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

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

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

1 回答

  • 56

    存在@ngrx/router-store,因此存储可能是应用程序路由状态的single source of truth .

    没有它,将会有应用程序状态 - 当前路径 - 未在商店中显示 . 这意味着使用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,我建议您查看它们:

相关问题