menu

Questions & Answers

Typescript Angular NGRX/Effects actions$.pipe() undefined

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

Comments:
2023-01-18 10:42:05
did you inject actions$ in your constructor ?
2023-01-18 10:42:05
Edited, yes I declared actions constructor.
2023-01-18 10:42:05
Extended information added.
2023-01-18 10:42:05
I moved effects to constructor and it works. I have to moce all code to strict mode.
2023-01-18 10:42:05
I don't understand why, (maybe any change in versions) because my code was working but moving effect inside constructor as @UlandNimblehoof suggested, it is working. :O
Answers(2) :

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.