Angular2 Ngrx 效果服务加载并命中我的服务两次

Question

我尝试使用 Ngrx 效果服务，但它似乎达到了我的请求的两倍

我的调度

this.store.dispatch(new workspacesActions.LoadWorkspaceDetailsActions(this.id));

效果服务:

export class loadDetailsWorkspaceEffectSservice {
    constructor(private actions$: Actions, private WkService: WorkspacesService) {

    }

    @Effect() detailsWorkspace$: Observable<Action> = this.actions$
        .ofType(ActionTypes.LOADWOKSPACESINFOS)
        .switchMap(arg =>

            this.WkService.getDetails(arg.payload))
        .map((workspace) => new workspacesActions.FetchWorkspaceDetailsActions(workspace) );
}

我的服务

 @Injectable()
export class WorkspacesService {  
public _getDetails;

        public getDetails(id: number) { 
        this.spinner.show()
        this._getDetails = this.http.get(config.apiWorkspacesDetailsURL + id, this.jwt())
            .share()
            .map((response: Response) => response.json())
            .catch(this.handleError)
            .finally(() =>  this.spinner.hide());

        return this._getDetails;
    }
}

我的行动

export class LoadWorkspaceDetailsActions implements Action {
  type = ActionTypes.LOADWOKSPACESINFOS;
    constructor(public payload?: any) { }
}

export class FetchWorkspaceDetailsActions implements Action {
  type = ActionTypes.FETCHWOKSPACESINFOS;

   constructor(public payload?: any) { }


}

我的 reducer

...
//////////////////
    case WorkspacesActions.ActionTypes.LOADWOKSPACESINFOS:
      return state;

    //////////////////
    case WorkspacesActions.ActionTypes.FETCHWOKSPACESINFOS:
      const resultWS = action.payload;

      return Object.assign(state, {
          workspaceDetails: resultWS.workspace
        });
...

我最终得到了两个 http 请求和 2 个响应!

感谢您的帮助

Answer 1

您可以尝试 ExhaustMap 而不是 SwitchMap:

@Effect() 
detailsWorkspace$ = this.actions$.pipe(
    ofType(ActionTypes.LOADWOKSPACESINFOS),
    exhaustMap(arg => this.WkService.getDetails(arg.payload)),
    map(workspace => new workspacesActions.FetchWorkspaceDetailsActions(workspace))
)

或使用新语法 (ngrx 8)

detailsWorkspace$ = createEffect(() => 
  this.actions$.pipe(
    ofType(ActionTypes.LOADWOKSPACESINFOS),
    exhaustMap(arg => this.WkService.getDetails(arg.payload)),
    map(workspace => new workspacesActions.FetchWorkspaceDetailsActions(workspace))
);

exhaustMap 阻止发送新请求，直到先前的请求完成为止 https://www.learnrxjs.io/operators/transformation/exhaustmap.html