在 ProvideEffects() 中提供 ngrx 效果时出错（Angular 14）

Question

当我尝试在 main.ts 提供程序数组中提供 ngrx 效果时，我收到此错误

Error: src/main.ts:18:21 - error TS2740: Type 'typeof import("/Users/macbook/IdeaProjects/angularPractice/src/app/auth/store/effects")' is missing the following properties from type 'Type<unknown>': apply, call, bind, prototype, and 5 more.

18     provideEffects([authEffects]),

这是我的createEffect

export const registerEffect = createEffect(
  (actions$ = inject(Actions),
   authService = inject(AuthService), 
  ) => {
    return actions$.pipe(
      ofType(authActions.register), 
      switchMap(({ request }) => {
        return authService.register(request).pipe(
          map((currentUser: CurrentUserInterface) => {
            return authActions.registerSuccess({ currentUser });
          }),
          catchError(() => {
            return of(authActions.registerFailure());
          }),
        );
      }),
    );
  },
);

这是 authActions

export const authActions = createActionGroup({
  source: 'auth',
  events: {
    Register: props<{ request: RegisterRequestInterface }>(),
    'Register success': props<{ currentUser: CurrentUserInterface }>(),
    'Register failure': emptyProps(),
  },
});

这里是authService

@Injectable({
  providedIn: 'root',
})
export class AuthService {
  constructor(private http: HttpClient) {}

  register(data: RegisterRequestInterface): Observable<CurrentUserInterface> {
    const url = environment.apiUrl + '/users';

    return this.http
      .post<AuthResponseInterface>(url, data)
      .pipe(map((response) => response.user));
  }
}

这是我的 main.ts 文件，我在其中提供了 useEffect

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { appRoutes } from './app/app.routes';
import { provideState, provideStore } from '@ngrx/store';
import { provideStoreDevtools } from '@ngrx/store-devtools';
import { importProvidersFrom, isDevMode } from '@angular/core';
import { authFeatureKey, authReducer } from './app/auth/store/reducer';
import { HttpClientModule } from '@angular/common/http';
import { provideEffects } from '@ngrx/effects';
import * as authEffects from './app/auth/store/effects';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(HttpClientModule),
    provideRouter(appRoutes),
    provideStore(),
    provideEffects([authEffects]),
    provideState(authFeatureKey, authReducer),
    provideStoreDevtools({
      maxAge: 25,
      logOnly: !isDevMode(),
      autoPause: true,
    }),
  ],
});

我完全不知道为什么会收到此错误。如果有人能指出我正确的方向，我将非常感激。

Answer 1

您需要使用

 { functional: true }

将效果配置为“功能效果”：

export const registerEffect = createEffect(
  (actions$ = inject(Actions),
   authService = inject(AuthService), 
  ) => {
    return actions$.pipe(
      ofType(authActions.register), 
      switchMap(({ request }) => {
        return authService.register(request).pipe(
          map((currentUser: CurrentUserInterface) => {
            return authActions.registerSuccess({ currentUser });
          }),
          catchError(() => {
            return of(authActions.registerFailure());
          }),
        );
      }),
    );
  },
  // 👇
  { functional: true }
);

有关更多信息，请参阅文档https://ngrx.io/api/effects/createEffect#function-effects