【发布时间】:2016-02-16 17:02:37
【问题描述】:
我在 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"}
感谢您的帮助!!
【问题讨论】:
-
代码示例中的小修正。我不使用 do 运算符,而是使用 mergeMap :
// catch employee selection let update = this.actions$ .filter ( action => action.type==UPDATE ) .do( () => this._store.dispatch({type: REDUCER_UPDATING }) ) .mergeMap ( action =>this._APIService.updateEmployee(action.payload) );
标签: javascript angular rxjs ngrx