0

Angular2 アプリケーションで NGRX と RxJS を使用しています。レコードの更新を保存しようとすると、「UPDATE」アクションを生成し、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();  //

これにより、ログに表示される更新は 1 つだけになります。

更新の重複を観察する理由は、更新ストリームをサブスクライブするたびに、監視可能なチェーンが「再開」されるためです。これは、RxJS でコールド オブザーバブルと呼ばれるものです。解決策は簡単shareです。複数のサブスクライバー間で共有したいオブザーバブルの最後に追加するだけです。

ホットとコールドの詳細については、公式ドキュメントを参照してください。図解されたデータとサブスクリプション フローを確認することもできます。

于 2016-02-16T18:05:04.690 に答える