NgRX 8 effect - createEffect() not working - Type 'Observable' is not assignable to type 'Observable

Question

I have an ionic 4 application where I am using NgRX 8.

The following code compiles:

connect1$ =
    this.actions$.pipe(
        // restart counter on every click
        switchMap(() => interval(1000))
);

but when I use createEffect() as follows:

   connect2$ = createEffect(() =>
        this.actions$.pipe(
            // restart counter on every click
            switchMap(() => interval(1000))
          )
    );

I get the following error:

Type 'Observable' is not assignable to type 'Observable | ((...args: any[]) => Observable)'

I saw in a previous post the suggestion of removing createEffect() to get to the issue with the syntax. But when I do this the older syntax does not give any issues.

NgRX 8 effects - Type 'Observable<unknown>' is not assignable to type 'Observable<Action>'

Any suggestions as to what I might look at?

Thanks

score 2 · Answer 1 · answered Oct 22 '19 at 19:51

The older syntax, does not have type checking - the new one does and hence this error. Now you get an error at compile time instead of an unexpected error at runtime.

You're getting this error because an effect should always return an Action, unless specified with { dispatch: false }

score 0 · Answer 2 · answered Oct 22 '19 at 20:46

TL;DR: Are you looking for ActionsSubject?

Your effect doesn't seem to do anything (even if it had a { dispatch: false }).

I find it helpful to think in terms of the following diagram.

In my mind effects should either be

a pure 'action in' → 'action out' effect
a side-effect like navigation

This forces you to think in the following fashion:

If I am creating an effect what outcomes are possible (normally success / fail)?

This leads to creation of appropriate actions for each.
Will this action lead to a change of state?

If you want to have state change than use appropriate actions (say RESTART_TIMER which in the reducer updates state with the time of last reset) and use selector to create the counter but you may be better off doing this in the component with a ActionsSubject subscription similar to this question

NgRX 8 effect - createEffect() not working - Type 'Observable' is not assignable to type 'Observable

2 Answers2