Hello I have issue with ngrx/effects - pipe undefined. Below I attached sample code which is correct along compilator but browser shows undefined pipe error.
constructor(
private actions$: Actions,
private ethereumService: EthereumService
) { }
loadUser$ = createEffect(() =>
this.actions$.pipe(
ofType(loadAccountState),
mergeMap(() => this.ethereumService.getAccountDetails()
.pipe(
map(setAccountStateCompleted),
catchError(() => EMPTY)
)
)
)
);
AppModule:
StoreModule.forRoot(reducers),
EffectsModule.forRoot([AccountEffects]),
EDIT: Even this sample has same error -_-
logActions$ = createEffect(() =>
this.actions$.pipe(
ofType(AccountActions.loadAccountState),
tap(action => console.log(action))
), { dispatch: false });
PS2. I am using ActionReducerMap
which is main reducer file imported to Root as 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
);
What is wrong with my code, please for help
actions$
in your constructor ? Depending how the $actions
is declared the geneated code might change when you set target ES2022 or newer.
Quick fix - add this to your tsconfig.json
:
"compilerOptions": {
{
// ...
"useDefineForClassFields": false
// ...
}
}
More info: https://www.typescriptlang.org/tsconfig#useDefineForClassFields
I fixed this problem by updating my tsconfig.json file to reference ES2020 instead of ESNEXT.
tsconfig keys
After this update, in my effects file, I have my createEffect methods outside the constructor and it's working for me.