如何在redux-observable Epic发送请求前触发Action？

看起来你已经找对路子啦！在NgRx Effect里发起请求前触发loading Action是前端状态管理里很常见的需求，不过你的代码还有可以完善的地方，我来帮你调整优化下：

import { ofType } from '@ngrx/effects';
import { mergeMap, map, catchError, finalize, tap } from 'rxjs/operators';
import { of } from 'rxjs';

// 假设你已经定义了对应的成功/失败Action类
// class FetchUserProjectsSuccess implements Action { ... }
// class FetchUserProjectsFailure implements Action { ... }

public fetchUserProjects(action$: Observable<IProjectAction>, store: Store<IAppState>): Observable<Action> {
  return action$.pipe(
    ofType(ProjectActionType.FETCH_USER_PROJECTS),
    // 用tap在数据流里触发loading动作，更贴合RxJS风格
    tap(() => store.dispatch(this._commonAction.showLoading())),
    mergeMap((action) => 
      this._projectService.getProjectList(action.payload).pipe(
        // 将接口返回结果映射为成功Action
        map((result) => new ProjectActions.FetchUserProjectsSuccess({ project: result })),
        // 捕获请求错误，分发失败Action
        catchError((error) => of(new ProjectActions.FetchUserProjectsFailure(error))),
        // 无论请求成功/失败，最后都关闭loading，避免页面一直处于加载态
        finalize(() => store.dispatch(this._commonAction.hideLoading()))
      )
    )
  );
}

• 完善错误与收尾逻辑：你原来的代码没处理请求失败的情况，加上catchError能捕获接口错误并分发对应失败Action，finalize则保证不管请求成功还是失败，loading都会被关闭，这是很重要的用户体验细节。
• 返回标准Action类型：NgRx Effect要求返回Observable<Action>类型，所以不能直接返回普通对象，得创建对应的Action类（比如FetchUserProjectsSuccess）来封装结果。
• 操作符选择灵活调整：如果你的场景是用户频繁触发请求，希望取消之前未完成的请求，可以把mergeMap换成switchMap；如果需要同时保留多个并行请求，mergeMap就很合适。
• 数据流风格优化：用tap操作符来触发loading Action，比在mergeMap里直接调用store.dispatch更贴合RxJS的数据流思维，逻辑也更清晰。

另外要确认你的showLoading()和hideLoading()是正确的Action实例，并且对应的reducer已经处理了这些动作来更新全局的loading状态哦！

内容的提问来源于stack exchange，提问作者Amir Movahedi