Angular 9 createEffect Observable类型错误

Question

我喜欢ngrx的官方指南。我想为auth创建我的第一个存储对象。我想，如果我从logout逻辑开始，我可以更好地理解逻辑，提高我的技能。

作为零步骤，我为http请求http-auth.service.ts:创建服务

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { throwError, Observable } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { environment } from 'environments/environment';
import { RegistrationModel } from 'app/shared/models';
import { TextSuccessModel } from 'app/shared/models/common';
@Injectable()
export class HttpAuthService {
constructor(private http: HttpClient) {}
$logout(): Observable<TextSuccessModel> {
// @FIXME: post request
return this.http.get(`${environment.apiUrl}/auth/logout`).pipe(
map((response: TextSuccessModel) => response),
catchError(this.handleError())
);
}
private handleError<T>() {
return (error: HttpErrorResponse) => {
return throwError(error.message || 'Something went wrong');
};
}
}

我在单独的文件actions/auth.actions.ts:中创建了actions

import { createAction } from '@ngrx/store';
// logout
export const logout = createAction('[Auth] Logout request');
export const logoutSuccess = createAction('[Auth] Logout Success');
export const logoutError = createAction('[Auth] Logout Fail');

接下来，我在reducers/auth.reducer.ts:中创建了reducer

import { Action, createReducer, on } from '@ngrx/store';
import * as AuthActions from '../actions/auth.actions';
export interface AuthState {
id: string | null;
rememberMe: boolean;
}
export const initialState: AuthState = {
id: null,
rememberMe: false,
};
export const authReducer = createReducer(
initialState,
// logout
on(AuthActions.logout, (state) => ({
...state,
loading: true,
})),
on(AuthActions.logoutSuccess, () => initialState),
on(AuthActions.logout, () => initialState)
);
export function reducer(state: AuthState | undefined, action: Action) {
return authReducer(state, action);
}

接下来我为商店创建模块

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { RouterModule } from '@angular/router';
import { effects } from './effects';
import { reducers } from './reducers';
@NgModule({
imports: [
CommonModule,
HttpClientModule,
StoreModule.forFeature('entityCache', reducers),
EffectsModule.forFeature(effects),
RouterModule,
],
exports: [StoreModule, EffectsModule],
})
export class AppStoreModule {}

最后，我尝试创建一个效果auth.effects.ts:

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Observable, of } from 'rxjs';
import { exhaustMap, tap, catchError } from 'rxjs/operators';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { HttpAuthService } from 'app/services/http';
import { TextSuccessModel } from 'app/shared/models/common';
import * as AuthActions from '../actions/auth.actions';
@Injectable()
export class AuthEffects {
constructor(
private actions$: Actions,
private router: Router,
private httpAuthService: HttpAuthService
) {}
/**
* LOGOUT
*/
logout$ = createEffect(() => {
return this.actions$.pipe(
ofType(AuthActions.logout),
exhaustMap(() => {
return this.httpAuthService.$logout().pipe(
tap(() => AuthActions.logoutSuccess()),
catchError(() => of(AuthActions.logoutError()))
);
})
);
});
}

vscode将我的代码标记为错误：

function(): Observable<TextSuccessModel | TypedAction<"[Auth] Logout Fail">>
Argument of type '() => Observable<TextSuccessModel | TypedAction<"[Auth] Logout Fail">>' is not assignable to parameter of type '() => Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<TextSuccessModel | TypedAction<"[Auth] Logout Fail">>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<TextSuccessModel | TypedAction<"[Auth] Logout Fail">>' is not assignable to type 'Observable<Action>'.

我是新来的。我为旧的角度版本找到了创建类型对象的解决方案。但我不知道该怎么解决。请帮忙。

Answer 1

效果应该总是返回一个操作(除非它标记为dispatch false(

tap运算符不会返回值，因为它是一个空值。您应该使用映射来返回成功操作。

logout$ = createEffect(() => {
return this.actions$.pipe(
ofType(AuthActions.logout),
exhaustMap(() => {
return this.httpAuthService.$logout().pipe(
map(() => AuthActions.logoutSuccess()),
catchError(() => of(AuthActions.logoutError()))
);
})
);
});