Angular6+NGRX+Firebase删除操作无法触发成功/失败动作问题

嘿，我一眼就揪出问题所在了——你的Firebase服务里的delete方法没有正确向Observable订阅者传递事件结果！

先看你的服务代码：你创建了一个Observable，但只是调用了this.doc(ref).delete()，完全没处理这个Promise的成功或失败回调。Observable的订阅者（也就是你的Effect）根本不知道删除操作到底完成没，自然不会触发后续的RemoveTaskSuccess或RemoveTaskFail动作。

第一步：修复服务的delete方法 #

Firebase的delete()返回的是Promise，我们可以用RxJS的from操作符直接把Promise转换成Observable，这是最简洁标准的做法：

delete<T>(ref: DocPredicate<T>): Observable<any> {
  // 直接将Promise转为Observable，自动处理成功/失败通知
  return from(this.doc(ref).delete());
}

如果你非要手动实现Observable逻辑（其实没必要），也得正确处理Promise的回调：

delete<T>(ref: DocPredicate<T>): Observable<any> {
  return new Observable(observer => {
    this.doc(ref).delete()
      .then(() => {
        observer.next(); // 通知操作成功完成
        observer.complete(); // 结束数据流
      })
      .catch(error => {
        observer.error(error); // 通知发生错误
      });
  });
}

第二步：（可选）给Effect加调试日志 #

为了方便后续排查，你可以在Effect里加几个tap操作符打印中间状态，确认每一步都在执行：

@Effect() removeTask$ = this.actions$.ofType(tasksActions.REMOVE_TASK).pipe(
  map((action: tasksActions.RemoveTask) => action.payload),
  tap(task => console.log('开始删除任务:', task.id)),
  switchMap(task => {
    return this.fss
      .delete('tasks/' + task.id)
      .pipe(
        tap(() => console.log('任务删除成功')),
        map(() => new tasksActions.RemoveTaskSuccess(task)),
        catchError(error => {
          console.error('删除任务出错:', error);
          return of(new tasksActions.RemoveTaskFail(error));
        })
      );
  })
);

为什么之前的代码没反应？ #

因为你原来的Observable既没调用observer.next()（告诉Effect操作成功），也没调用observer.error()（告诉Effect操作失败），Effect里的map和catchError根本没有执行的机会。修复服务的Observable后，数据流就能正常传递，Success/Fail动作也就会被正确触发了。

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