当 URL 的查询参数发生变化时，如何分派 NGRX 操作？

Question

当 URL 的查询参数发生变化时，您将如何调度 ngrx 操作？我有一个带参数的 URL（例如 http://myapp.my/documents?startdate=2015-04-04&enddate=2015-06-06 ），当用户单击后退（前进）浏览器按钮时，angular 将导航到上一个（下一个）URL可能有不同的搜索参数。所以我需要调度一个 "load documents" 动作来从数据库加载相应的文档。我可以看到多种方法。

我可以将 ngrx @Effect 绑定到 angular-router "navigationend" 可观察并检查 URL 是否匹配 “/文件”。效果会发送加载文档操作
我可以将 ngrx @Effect 绑定到 ROUTER_NAVIGATION 由 ngrx/router-store 生成的动作并执行动作。这里的问题是 ROUTER_NAVIGATION 不能保证用户真的会到达预期的页面（例如他们可能会被路由守卫阻止），
我可以在 "documents" 路径的 canActivate() 守卫中调度动作 - 也许其他问题隐藏在这里（编辑：测试了这个但它不起作用，因为 canActivate 只被调用一次。它不是URL 参数更改时再次调用。）
有更好的方法吗？

Angular5，ngrx 4.

Answer 1

你应该使用@ngrx/router-store将当前路由添加到商店，然后你可以订阅当前路由参数，如

this.store.select('routerReducer', 'state', 'params').subscribe(params => {
  // do stuff
})

select 应该会自动为您删除重复数据 params ，确保您只在路由参数更改时分派操作。如果合适，您还可以修改它以使用 .pipe()。或者制作一个 @Effect() 来监视路由器并做一些事情。 @ngrx/router-store 有所有这些的解决方案。

Version 4.1.1 docs <-- 编辑：这些文档现已过时

Answer 2

使用以下代码：

this.route.params.subscribe(param: ParamMap => {
  // dispatched your action to fetch data
  this.store.dispatch(new YourAction.YourActionMethod());
  // When your store will update then subscribe will fired
  this.store.select(reducers.YourReducer).subscribe((data) => {
    if (data) {
      // use your data here
    }
  });
});

希望对您有所帮助

当 URL 的查询参数发生变化时，如何分派 NGRX 操作？

How can I dispatch an NGRX action when query params of an URL change?

ngrx

angular