NGRX Effects / Firebase (Firestore) Ошибка - PullRequest
Новая
       7

NGRX Effects / Firebase (Firestore) Ошибка

0 голосов
/ 19 мая 2018

У меня есть угловое 6 приложение с ngrx и firebase, и я настроил свой магазин и сервисы для выполнения основных операций crud.

Кажется, все работает хорошо, то есть я могу добавлять, редактировать, удалять записи.Однако я пытаюсь выполнить успешное действие, но оно, похоже, не доходит до действия, и я не знаю, как отловить ошибку.

Следующие строки в эффекте никогда не кажутсявыполнить, и я не получаю никаких ошибок.

.pipe(
              map(() => new tasksActions.RemoveTaskSuccess(task)),
              catchError(error => of(new tasksActions.RemoveTaskFail(error)))
            );

Я пытался отладить, но код просто не возвращается.

ЭФФЕКТ 

 @Effect()
      removeTask$ = this.actions$.ofType(tasksActions.REMOVE_TASK).pipe(
        map((action: tasksActions.RemoveTask) => action.payload),
        switchMap(task => {
          return this.fss
            .delete('tasks/' + task.id)
            .pipe(
              map(() => new tasksActions.RemoveTaskSuccess(task)),
              catchError(error => of(new tasksActions.RemoveTaskFail(error)))
            );
        })
      );

СЕРВИС 

delete<T>(ref: DocPredicate<T>): Observable<any> {
    return new Observable(observer => {
      this.doc(ref).delete();
    });
  }

АКЦИЯ 

import { Action } from '@ngrx/store';
import { Board } from '../../models/task.model';

export const LOAD_TASKS = '[Tasks]: Load Tasks';
export const LOAD_TASKS_FAIL = '[Tasks]: Load Tasks Fail';
export const LOAD_TASKS_SUCCESS = '[Tasks]: Load Tasks Success';
export const CREATE_TASK = '[Tasks]: Create Task';
export const CREATE_TASK_FAIL = '[Tasks]: Create Task Fail';
export const CREATE_TASK_SUCCESS = '[Tasks]: Create Task Success';
export const UPDATE_TASK = '[Tasks] Update ';
export const UPDATE_TASK_FAIL = '[Tasks] Update  Fail';
export const UPDATE_TASK_SUCCESS = '[Tasks] Update  Success';
export const REMOVE_TASK = '[Tasks] Remove Task ';
export const REMOVE_TASK_FAIL = '[Tasks] Remove Task  Fail';
export const REMOVE_TASK_SUCCESS = '[Tasks] Remove Task  Success';

export class LoadTasks implements Action {
  readonly type = LOAD_TASKS;
}

export class LoadTasksFail implements Action {
  readonly type = LOAD_TASKS_FAIL;
  constructor(public payload: any) {}
}

export class LoadTasksSuccess implements Action {
  readonly type = LOAD_TASKS_SUCCESS;
  constructor(public payload: Board[]) {}
}

export class CreateTask implements Action {
  readonly type = CREATE_TASK;
  constructor(public payload: Board) {}
}

export class CreateTaskFail implements Action {
  readonly type = CREATE_TASK_FAIL;
  constructor(public payload: any) {}
}

export class CreateTaskSuccess implements Action {
  readonly type = CREATE_TASK_SUCCESS;
  constructor(public payload: Board) {}
}

export class UpdateTask implements Action {
  readonly type = UPDATE_TASK;
  constructor(public payload: Board) {}
}

export class UpdateTaskFail implements Action {
  readonly type = UPDATE_TASK_FAIL;
  constructor(public payload: any) {}
}

export class UpdateTaskSuccess implements Action {
  readonly type = UPDATE_TASK_SUCCESS;
  constructor(public payload: Board) {}
}

export class RemoveTask implements Action {
  readonly type = REMOVE_TASK;
  constructor(public payload: Board) {}
}

export class RemoveTaskFail implements Action {
  readonly type = REMOVE_TASK_FAIL;
  constructor(public payload: any) {}
}

export class RemoveTaskSuccess implements Action {
  readonly type = REMOVE_TASK_SUCCESS;
  constructor(public payload: Board) {}
}

export type TasksAction =
  | LoadTasks
  | LoadTasksFail
  | LoadTasksSuccess
  | CreateTask
  | CreateTaskFail
  | CreateTaskSuccess
  | UpdateTask
  | UpdateTaskFail
  | UpdateTaskSuccess
  | RemoveTask
  | RemoveTaskFail
  | RemoveTaskSuccess;

РЕДУКТОР 

import * as fromTasks from '../actions/tasks.actions';
import { Board } from '../../models/task.model';
// import { reducers } from '../../../../../../store/reducers/index';

export interface TaskState {
  entities: { [id: string]: Board };
  loaded: boolean;
  loading: boolean;
}

export const initialState: TaskState = {
  entities: {},
  loaded: false,
  loading: false
};

export function reducer(state = initialState, action: fromTasks.TasksAction): TaskState {
  switch (action.type) {
    case fromTasks.LOAD_TASKS: {
      return {
        ...state,
        loading: true
      };
    }

    case fromTasks.LOAD_TASKS_FAIL: {
      return {
        ...state,
        loading: false,
        loaded: false
      };
    }

    case fromTasks.LOAD_TASKS_SUCCESS: {
      const tasks = action.payload;
      const entities = tasks.reduce(
        // tslint:disable-next-line:no-shadowed-variable
        (entities: { [id: string]: Board }, task: Board) => {
          return {
            ...entities,
            [task.id]: task
          };
        },
        {
          ...state.entities
        }
      );
      return {
        ...state,
        loading: false,
        loaded: true,
        entities
      };
    }

    // If update or create
    case fromTasks.UPDATE_TASK_SUCCESS:
    case fromTasks.CREATE_TASK_SUCCESS: {
      const task = action.payload;
      const entities = {
        ...state.entities,
        [task.id]: task
      };

      return {
        ...state,
        entities
      };
    }

    case fromTasks.REMOVE_TASK_SUCCESS: {
      const task = action.payload;
      const { [task.id]: removed, ...entities } = state.entities;

      return {
        ...state,
        entities
      };
    }
  }
  return state;
}

export const getTasksEntities = (state: TaskState) => state.entities;
export const getTasksLoading = (state: TaskState) => state.loading;
export const getTasksLoaded = (state: TaskState) => state.loaded;

1 Ответ

0 голосов
/ 19 мая 2018

Вам нужно отловить ошибку для сервисной части, отобразить результаты и отловить ошибки для внешней наблюдаемой.Firestore delete возвращает обещание, преобразует его в наблюдаемое и улавливает ошибку: 

delete<T>(ref: DocPredicate<T>): Observable<any> {
    // RxJS v5 'fromPromise' is changed to 'from'
    return from(this.doc(ref).delete()).pipe(
        catchError(error => throwError(error))
    )
)
...