web-dev-qa-db-ja.com

ngrx-2つのstore.selectスライスをチェーンする

私のTodo Cmpにはこのコードがあります

this.todoListGroup$ = this.ngrx.select(fromRoot.getTodos)
    .flatMap((todos: Todo[]) => {
        console.log(todos)
        this.todos = todos
        this.ngrx.select(fromRoot.getLastChangedTodo);
    })
    .map(lastTodo =>{{
        console.log(lastTodo)
        doSomething(this.todos, lastTodo)
    })

サブスクライブすると、変更を行うたびにconsole.log（lastTodo）が1つ増えます。 flatmapとngrx.selectを使用して、毎回新しいObservableをサブスクライブしていると思いますか？

2つのストアスライスをチェーンできるのはどのオペレーターですか？

編集：

ビューがDOM内にある限り、ビューを更新し続ける必要があるので、todoListGroup $にサブスクライブしたままにしておきます。

これまでの私の解決策は、2つの望ましいプロパティを返すリデューサーに新しいスライスを定義することです。ただし、どのオペレーターがngrxの単一のプロパティスライスを効果的にチェーンできるかにまだ興味があります。

ありがとう！

angularrxjsngrx
10
Han Che

このようなものでしょうか：

this.todoListGroup$ =
    Observable.combineLatest(
        this.ngrx.select(fromRoot.getTodos), 
        this.ngrx.select(fromRoot.getLastChangedTodo)
    )
    .do(([todos, lastToDo]) => console.log(todos, lastToDo));

doは毎回実行されますどちらか1つgetTodosまたはgetLastChangedTodoが更新され、その時点でそれぞれから最新の既知の値を取得しますアップデートの。ここでの警告はorderであり、これらの各更新が実行されるタイミングは常に同じであるとは限りません。したがって、連鎖（またはカスケード）更新の詳細が必要な場合は、次のようにすることができます。

this.todoListGroup$ =
    this.ngrx.select(fromRoot.getTodos)
    .withLatestFrom(this.ngrx.select(fromRoot.getLastChangedTodo))
    .do(([todos, lastToDo]) => console.log(todos, lastToDo));

これは、getToDosが更新されるたびに実行され、getLastChangedTodoから最新の値を取得します。したがって、連鎖（またはカスケード）された更新イディオムです。

5
bryan60

これは、RxJのバージョン6.0に対するアプローチです。

まず、次のように演算子とObservable関数をインポートします。

import { Observable, combineLatest } from 'rxjs';
import { tap } from 'rxjs/operators';

その後、次のように使用できます。

combineLatest(
      this.store.pipe(select('users', 'userList')),
      this.store.pipe(select('users', 'accountsList')),
).pipe(tap(([userList, accountsList]) => console.log(userList, accountsList)))
8
Sebastian Hernandez

これを試して：

this.todoListGroup$ = this.ngrx.select(fromRoot.getTodos)
.flatMap((todos: Todo[]) => {
    console.log(todos)
    this.todos = todos
    this.ngrx.select(fromRoot.getLastChangedTodo);
})
.take(1)
.map(lastTodo =>{{
    console.log(lastTodo)
    doSomething(this.todos, lastTodo)
})
0
pioro90