javascript - 在 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

您可以从史诗中删除showLoading调度fetchUserProjects，然后创建第二个史诗：

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())
      )))