Redux 状态和 Angular 2 路由

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());

你也可以查看这个：https://github.com/dagstuan/ng2-redux-router