ngrx-连锁两个store.select切片 [英] ngrx - chain two store.select slices

问题描述

在我的Todo Cmp中，我有此代码

In my Todo Cmp I have this code

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).我认为使用flatmap和ngrx.select每次都订阅一个新的Observable吗?

When I subscribe to it I get one more console.log(lastTodo) each time todo changes. I figure that with flatmap and ngrx.select, I'm subscribing to a new Observable each time?

我可以用哪个运算符链接两个商店切片?

with which operator can I chain two store slices?

只要视图在DOM中，我就想继续订阅todoListGroup $，因为它应该不断更新我的视图.

As long as the view is in the DOM, I want to stay subscribed to todoListGroup$ since it should keep updating my view.

到目前为止，我的解决方案是在化简器中定义一个新切片，该切片返回两个所需的属性.但是，我仍然对哪个运算符可以有效地链接ngrx单个属性片感兴趣.

My solution so far is to define a new slice in the reducer which returns the two desired properties. However, I'm still interested in which operator can effectively chain ngrx single property slices.

谢谢！

推荐答案

会进行以下工作吗:

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

do将在每次 getTodos或getLastChangedTodo中的一个更新时执行，并在更新时从每个值中获取最新的已知值.警告是这些更新中的每一个何时触发的顺序可能并不总是相同的.因此，如果您想要更多的链式(或级联)更新，则可以执行以下操作:

The do would execute each time either one of getTodos or getLastChangedTodo is updated and would take the latest known values from each of them at the time of the update. The caveat here is the order of when each of those updates are fired may not always be the same. So, if you wanted more of a chained (or cascaded) update then you could do this:

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

这将在每次更新getToDos时执行，并将采用getLastChangedTodo中的最新值.因此，链式(或级联)更新的习惯用法.

That will execute each time getToDos is updated and would take the latest value from getLastChangedTodo. Hence the chained (or cascaded) updated idiom.

编辑rxjs 5+语法:

edit for rxjs 5+ syntax:

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


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

这篇关于ngrx-连锁两个store.select切片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！