Угловой NGRX: охранники с побочным эффектом - PullRequest
Новая
       25

Угловой NGRX: охранники с побочным эффектом

0 голосов
/ 05 декабря 2018

Я недавно извиняюсь, если это дублирование какого-то вопроса, но я не могу найти решение для моей проблемы.

У меня есть охрана, и теперь мне нужно отловить ошибку в ней со стороны.эффект, который вызывает службу http и перенаправляет пользователя в состояние ошибки.Пытался добавить catchError, но я даже не захожу туда, если получаю ошибку со стороны сервера.

guard.ts 

canActivate(): Observable<boolean> {
    return this.store
        .select(fromDataStore.getDatasLoaded)
        .pipe(
            withLatestFrom(this.store.select(fromDataStore.getDataLoading)),
            map(([loaded, loading]) => {
                if (!loaded && !loading) {
                    this.store.dispatch(new fromDataStore.LoadData());
                }
                return loaded;
            }),
            filter(loaded => loaded),
            take(1),
            catchError(error => {
                // redirect user to error state
            })
        );
}

effect.ts 

 @Effect() loadData$: Observable<Action> = this.actions$.ofType(DataActionTypes.LoadData)
    .pipe(
        mergeMap(() =>
            this.dataApiService.loadData()
                .pipe(
                    map(data => ({
                        type: DataActionTypes.LoadDataSuccess,
                        payload: data
                    })),
                    catchError(() => of({ type: DataActionTypes.LoadDataFailure }))
                )
        )
    );

reducer.ts 

case DataActionTypes.LoadData: {
        return {
            ...state,
            data: {
                ...state.data,
                isLoading: true
            }
        };
    }
    case DataActionTypes.LoadDataSuccess: {
        return {
            ...state,
            data: {
                ...dataAdapter.addMany(action.payload, state.data),
                isLoaded: true,
                isLoading: false
            }
        };
    }
    case DataActionTypes.LoadDataFailure: {
        return {
            ...state,
            data: {
                ...state.data,
                isLoaded: true,
                isLoading: false
            }
        };
    }
    default: {
        return state;
    }

1 Ответ

0 голосов
/ 05 декабря 2018

Когда вы обрабатываете LoadDataFailure в редукторе, вы можете добавить ошибку в состояние.

В стороже вы можете добавить withLatestFrom и выбрать эту часть состояния с ошибкой.Вместо catchError здесь нет ошибки, поэтому она ничего не поймает.

Если у вас нет ошибки, вы можете перейти на страницу, если у вас есть ошибка, перенаправьте пользователя на то, что вам нужно.

Вы также можете немного реорганизовать код, как всегда вызывать действие загрузки при входе охранника, перемещать оператор if наружу и работать с потоком isDataLoaded.

Что-то вроде: 

this.store.dispatch(new fromDataStore.LoadData());

return this.store
        .select(fromDataStore.getDatasLoaded)
        .filter(Boolean),
        .withLatestFrom(fromDataStore.getError)
        ...
...