Angular 2 と @ngrx/store を使用するプロジェクトで使用しています。また、@ngrx/devtools を使用してデバッグし、この redux 実装の作業を支援しています。
angularのルーターをngrxのストアにバインドしたいと思います。したがって、アクションをディスパッチすることで現在のルートを更新できます。
環境
これは私がやったことです（動作しますが、これは私が望むものではありません）：
// imports
// ....
// @Component
// ....
@RouteConfig([
{ path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true },
{ path: '/medias', name: 'Medias', component: MediasComponent }
])
export class MainComponent {
constructor (private _router:Router, private _store:Store<AppStore>) {
_router.subscribe(url => _store.dispatch(changeUrl(url)));
}
}
changeUrlはアクション作成者です。
したがって、Angular がルートの更新を検出すると、アクションがディスパッチされ、状態が更新されます。
そしてそれはうまくいきます！@ngrx/devtools を使用すると、アクションが正しくディスパッチされ、ストアが更新されていることがわかりますが、Angular がジョブを実行して redux を更新するため、これは私が望むものとは逆です。したがって、アクションをロールバックしても、ビューは更新されません。
それは簡単です ！
「私がしなければならないことは、アクション クリエーター内のナビゲーション リンクをクリックしたときにアクションをディスパッチし、Angular のメソッドを使用してリダイレクトすることだけです。」
うん。しかし、いいえ、次の理由により、それは良い方法ではないと思います。
<a [routerLink]="routeName">Link</a>Angularが提供するものは役に立たなくなります。Routerアクションクリエーターは基本的に関数であるため、AngularのDIを使用してアクションクリエーター内に注入するのは難しいようです。angular のコンポーネントではありません。
何をすべきか ？
これが質問です。Angular のルーターと @ngrx/store を正しくバインドする方法がよくわかりません。