在 redux-observable 史诗中发送请求之前触发一个动作

Question

我想在向服务器发送请求之前触发一个动作。这是我的代码：

public fetchUserPrjects(action$: Observable<IProjectAction>, store: Store<IAppState>) {
    return action$.pipe(
      ofType(ProjectActionType.FETCH_USER_PROJECTS),
      mergeMap((action) => {
        store.dispatch(this._commonAction.showLoading()); // <== call action before request
         return this._projectService.getProjectList(action.payload)
          .map((result) => {
               return {
              project: result
            };
          });
      }),
      flatMap(data => [
        this._projectAction.addUserProjects(data),
        this._commonAction.hideLoading()
      ])
    ).catch((error) => {
      return Observable.of(this._commonAction.showError(error));
    })
    .concat(Observable.of(this._commonAction.hideLoading()));
  }

我试过很多方法，结果都是这样。但是，这种方式有时有效有时无效。有时它会冻结整个过程。如何在将请求发送到服务器之前触发操作？

Answer 1

您可以从 fetchUserProjects 史诗中删除 showLoading 调度，然后只需创建一个 second 史诗：

return action$.pipe(
      ofType(ProjectActionType.FETCH_USER_PROJECTS),
      map(() => this._commonAction.showLoading())
    );

执行顺序并不重要，因为请求 this._projectService.getProjectList 是异步的，因此肯定会在之后解决。

Answer 2

这个怎么样：

 return action$.pipe(
      ofType(ProjectActionType.FETCH_USER_PROJECTS),
      flatMap(action => Observable.concat(
        this._projectService.getProjectList(action.payload)
            .map(this._projectAction.addUserProjects({ project: result}))
            .startWith(this._commonAction.showLoading())
            .catch(error => this._commonAction.showError(error)),
        Observable.of(this._commonAction.hideLoading())
      )))

在 redux-observable 史诗中发送请求之前触发一个动作

Fire an action before sending request in redux-observable epic

javascript

rxjs

redux-observable

angular

angular-redux