2016-09-28 13 views
4

私はAngular 2アプリケーションでRedux状態管理について把握しようとしており、ReduxステートとAngular 2ルーティングがうまく一緒に遊ぶことができるかどうか疑問に思っています。ReduxステートとAngular 2ルーティング

たとえば、日付または日付範囲を取るさまざまなビュー(別々のルートを持つコンポーネント)があります。だから私のアプリのバーでは、ユーザーが日付を選択するためのカレンダーを表示するボタンがあります。その後、クエリパラメータとしてこの日付を取得します

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

私はその後、アクティブにルーティングクエリを聞くことによってコンポーネント内の日付を取得することができますビューは、今私はReduxのでこれを行うだろうか

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

パラメータつまり、私はどのようにReduxストア内の状態を維持することになっていますか?最初に私は、私はちょうどそれがこれを行うための推奨される方法です日付パラメータを取得し、店にDATE_ACTION_CHANGEとしてそれを派遣して、順番に状態変化

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

に耳を傾けるだろうと思いましたか?私はただ一つの観察可能性がある限り、それは正常に動作します。しかし、私はさまざまなソースからパラメータを取得します。たとえば、別のパラメータはクライアントのIDです。これは、順番にそれがかすんで取得され

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

は、私はIDと日付でストアを更新してから変更した状態の両方の性質をリッスンする必要があり、URLの一部ですか?一方が変更された場合はどうなりますが、もう一方は変更されませんか?私はこの間違いを指摘しているような気がします。

https://github.com/ngrx/router-store(場合には、あなたが/ストアをngrx使用している):あなたはおそらく考慮すべきである何

答えて

4

は次のライブラリです。

角度/ルーターをngrx /ストアに接続するためのバインディングを提供します。それはまた次のストアディスパッチアクションをprovdes:歴史に

新しい状態でのナビゲーション

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

ナビゲーションの歴史に新しい状態を押さずにナビゲーション

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

歴史の中で、現在の状態を置き換えると

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

クエリパラメータのみの変更によるナビゲーションetersあなたも、この1確認することができますバック

前方

store.dispatch(forward()); 

をナビゲート

store.dispatch(back()); 

をナビゲート

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

:ngrx /プラットフォームのリファクタリング(メジャーバージョンであることに注意してくださいhttps://github.com/dagstuan/ng2-redux-router

+0

を4)、ここに記載されているように、独自のルータアクションを作成する必要があります。https://github.com/ngrx/platform/blob/maste r/MIGRATION.md#navigation-actions – timbru31

関連する問題