Question

我正试图在我的Angular 2应用程序中控制Redux状态管理，并且想知道Redux状态和Angular 2路由如何可以很好地协同工作。

例如，我有各种视图（即具有不同路径的组件），它们采用日期或日期范围。所以在我的应用程序栏中，我得到一个按钮，显示用户选择日期的日历。然后视图将此日期作为查询参数

http://localhost:3000/view&date=20160928

然后我可以通过监听激活的路由查询参数来检索组件内的日期

this.route.queryParams.subscribe(params => <load records for date>);

现在我如何使用Redux执行此操作，也就是说，我应该如何仅将状态保留在Redux存储中？起初我以为我只是获取日期参数并将其作为DATE_ACTION_CHANGE发送到商店，然后依次听取状态更改

date$ = this.ngRedux.select(state => state.date)
   .subscribe(date => <load records for date>);

这是推荐的做法吗？只要我只有一个可观察对象，它就可以正常工作。但是，我从各种来源获取参数。例如，另一个参数是客户的ID。这反过来又是URL的一部分，

localhost:3000//client/45&date=20160928

当它变得模糊时，我应该用ID和日期更新商店，然后监听状态中的两个属性来改变吗？如果一个改变了，但另一个不改变怎么办？我有一种感觉，我做错了，有什么指针吗？

Answer 1

您应该考虑的是以下库：

https://github.com/ngrx/router-store（如果您使用的是ngrx / store）。

它提供了将angular / router连接到ngrx / store的绑定。它还提供以下商店调度操作：

使用新状态导航到历史记录

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

导航并替换历史中的当前状态

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

导航而不将新状态推入历史

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

仅使用更改查询参数进行导航

  store.dispatch(search({ query: 'string' }));

导航回来

  store.dispatch(back());

向前导航

  store.dispatch(forward());