Effect "RouterEffects.navigate$" dispatched an invalid action: {"path":["..."]}

I'm using @ngrx/router-store and setting up a CustomerSerializer to manage routes in my state tree. I'm using the example in the @ngrx/router-store configuration docs. Also setup a RouterEffects class with a navigate$ effect to a specified path:

navigate$ = createEffect(():any => {
    return this.actions$.pipe(
        ofType(RouterActions.GO),
        map((action: RouterActions.Go) => action.payload),
        tap(({ path, query: queryParams, extras }) => {
          this.router.navigate(path, { queryParams, ...extras });
        }) 
      )
    }
  );

When I dispatch a "GO" action with a payload, the Angular router navigates to the specified path, but I get this error in the console:

ERROR Error: Effect "RouterEffects.navigate$" dispatched an invalid action: {"path":["/admin"]}

I don't understand where the secondary action is being dispatched.

The problem is map((action: RouterActions.Go) => action.payload),

An effect always dispatches the next value back to the store. This should be an action, but in this case it's the action's payload, resulting in the error.

To fix this you need to create non-dispatching effect.

navigate$ = createEffect(():any => {
    return this.actions$.pipe(
        ofType(RouterActions.GO),
        map((action: RouterActions.Go) => action.payload),
        tap(({ path, query: queryParams, extras }) => {
          this.router.navigate(path, { queryParams, ...extras });
        }) 
      )
    }
    // add this 👇
    , {dispatch: false}
  );