Почему действие не применяется внутри возвращаемой наблюдаемой в эффектах ngrx? - PullRequest
Новая
       4

Почему действие не применяется внутри возвращаемой наблюдаемой в эффектах ngrx?

0 голосов
/ 10 октября 2019

Я пытаюсь остановить спиннер, если попытка регистрации не удалась, через действие authFailed в эффектах ngrx. Я не могу понять, почему действие, возвращаемое в наблюдаемой of (), не применяется (это действие возвращает load: false). Поэтому, если попытка регистрации не удалась, функция ошибки обработчика работает, но действие в перенастроенной наблюдаемой не вызывает остановку счетчика. 

@Injectable()
export class AuthEffects {
    signup$ = createEffect(() =>
        this.actions$
            .pipe(
                ofType(AuthActions.trySignup),
                switchMap(action => {
                    return this.http
                        .post<User>(`${BACKEND_URL}/users/signup`, action.payload)
                        .pipe(
                            tap(() => this.router.navigate(['/login'])),
                            map(response => response),
                            catchError(err => this.handleError(err))
                        );
                }),
            ),
        { dispatch: false }
    );


    private handleError = (errorRes: any) => {
        if (!errorRes.error || !errorRes.error.error) {
            return of(AuthActions.authFailed({ message: 'Unknown Error' }));
        }
        return of(AuthActions.authFailed({ message: errorRes.error.message }));
    }

    constructor(
        private actions$: Actions,
        private router: Router,
        private http: HttpClient,
        private authService: AuthService
    ) {

Мои редукторы: 

export interface AuthState {
    user: User;
    loading: boolean;
}

export const initialAuthState: AuthState = {
    user: undefined,
    loading: false
};

export const authReducer = createReducer(
    initialAuthState,
    on(AuthActions.signup, AuthActions.tryLogin, (state, action) => {
        return {
            ...state,
        };
    }),
    on(AuthActions.trySignup, (state, action) => {
        return {
            ...state,
            loading: true
        };
    }),
    on(AuthActions.setAuth, (state, action) => {
        return {
            ...state,
            user: action.user

        };
    }),
    on(AuthActions.logout, (state, action) => {
        return {
            ...state,
            user: undefined
        };
    }),
    on(AuthActions.authFailed, (state, action) => {
        return {
            ...state,
            loading: false
        };
    })
);

Компонент регистрации: 

export class SignupComponent implements OnInit, OnDestroy {
    isLoading = false;
    private authSub: Subscription;
    usernameTaken = false;
    constructor(private authService: AuthService,
        private store: Store<AppState>) { }

    ngOnInit() {
        this.authSub = this.store
            .select(loading)
            .pipe(
                map(status => status)
            )
            .subscribe(status => {
                this.isLoading = status;
            });
    }

    onSignup(form: NgForm) {
        if (form.invalid) {
            return;
        }
        const signupData: SignupData = {
            email: form.value.email,
            username: form.value.username,
            password: form.value.password
        };
        this.store.dispatch(AuthActions.trySignup({ payload: signupData }));
    }

    ngOnDestroy() {
        this.authSub.unsubscribe();
    }


}
...