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