Typescript Angular NGRX/效果操作$.pipe() 未定义

Question

您好，我有 ngrx/effects 问题 - 管道未定义。下面我附上了示例代码，该代码在编译器中是正确的，但浏览器显示未定义的管道错误。

constructor(
    private actions$: Actions,
    private ethereumService: EthereumService
) { }

loadUser$ = createEffect(() =>
    this.actions$.pipe(
        ofType(loadAccountState),
        mergeMap(() => this.ethereumService.getAccountDetails()
            .pipe(
                map(setAccountStateCompleted),
                catchError(() => EMPTY)
            )
        )
    )
);

应用程序模块：

StoreModule.forRoot(reducers),
EffectsModule.forRoot([AccountEffects]),

编辑：即使这个示例也有相同的错误-_-

logActions$ = createEffect(() =>
    this.actions$.pipe(
        ofType(AccountActions.loadAccountState),
        tap(action => console.log(action))
    ), { dispatch: false });

PS2。我正在使用

ActionReducerMap

，这是导入到 Root 的主减速器文件

reducers

import {
  createSelector,
  createFeatureSelector,
  ActionReducerMap,
} from '@ngrx/store';

import * as fromAccount from './account.reducer';

export interface State {
  account: fromAccount.State;
}

export const reducers: ActionReducerMap<State> = {
  account: fromAccount.updateAccountReducer,
};

export const selectAccountState = createFeatureSelector<fromAccount.State>('account');

//Account Selectors
export const selectCurrentUser = createSelector(
  selectAccountState,
  fromAccount.selectActiveAccount
);

我的代码有什么问题，请帮忙

Answer 1

根据

$actions

的声明方式，当您设置目标 ES2022 或更高版本时，生成的代码可能会发生变化。

快速修复 - 将其添加到您的

tsconfig.json

：

"compilerOptions": {
  {
    // ...
    "useDefineForClassFields": false
    // ...
  }
}

将来您可能想要重构类初始化并避免使用此标志。

更多信息：

• https://www.typescriptlang.org/tsconfig#useDefineForClassFields
• https://angular.schule/blog/2022-11-use-define-for-class-fields

将编译器目标切换到 ES2022 时也可能会发生此问题，并且某些 Jest 测试因此而失败。

Answer 2

我通过更新 tsconfig.json 文件以引用 ES2020 而不是 ESNEXT 解决了这个问题。

在此更新之后，在我的效果文件中，我在构造函数之外添加了 createEffect 方法，并且它对我有用。

Answer 3

在角度 15 中，使用

actions$ = inject(Actions);

当 lib 在 tsconfig 中设置为 ES2022 时