0

我在 Angular2 应用程序中使用 NGRX 和 RxJS。当使用尝试保存记录更新时，我会生成一个操作“更新”，我想调用 API 来更新数据库。

问题是“.filter (action => action.type==UPDATE)”之后的所有内容都被调用了 4 次。

我不明白为什么。我尝试了很多东西并更改了代码，但问题仍然存在...

我的代码：

private actions$ : BehaviorSubject<Action> = new BehaviorSubject<Action>({type: null, payload: null});

.../.... 

// catch employee selection
let update = this.actions$                                  
            .filter ( action => action.type==UPDATE )
             // **** following are executed 4 times ****
            .do( () => this._store.dispatch({type: REDUCER_UPDATING }) )
            .mergeMap ( action =>this._APIService.updateEmployee(action.payload) );  //  


// merge all stream and dispatch action
let all = Observable.merge (update, load, selectItem);
all.subscribe ((action:Action) => this._store.dispatch (action));

要实时查看问题：

https://plnkr.co/edit/zq4AsKJYILfrgItDNbHo?p=preview

在主面板中选择一名员工。在详细信息面板中，单击保存按钮。您将在控制台中看到 API 被调用了 4 次：

REDUCER - {"type":"SELECTING_ITEM","payload":1}
REDUCER - {"type":"UPDATING"}
API - UPDATE_EMPLOYEE          <====1
REDUCER - {"type":"UPDATING"}
API - UPDATE_EMPLOYEE          <====2
REDUCER - {"type":"UPDATING"}
API - UPDATE_EMPLOYEE          <====3
REDUCER - {"type":"UPDATING"}
API - UPDATE_EMPLOYEE          <====4
REDUCER - {"type":"UPDATED"}

谢谢您的帮助 ！！

4

1 回答 1

2

我用以下内容替换了该update部分：

// catch employee selection
let update = this.actions$                                  
            .filter ( action => action.type==UPDATE )
             // **** following are executed 4 times ****
            .do( () => this._store.dispatch({type: REDUCER_UPDATING }) )
            .mergeMap ( action =>this._APIService.updateEmployee(action.payload) )
            .share();  //

这导致日志中只出现一个更新。

您观察到更新重复的原因是因为每次您订阅更新流时，可观察链都会“重新启动”。这就是在 RxJS 中所谓的冷可观察对象。解决方案很简单，只需share在要在多个订阅者之间共享的 observable 末尾添加即可。

有关热与冷的更多详细信息，请参阅官方文档。您还可以查看图示的数据和订阅流程。

于 2016-02-16T18:05:04.690 回答