使用@ngrx/router-store时RouterEffects.navigate$触发无效动作错误

错误原因 #

你的navigate$ Effect返回的Observable流最后输出的是Action的payload对象（{"path":["/admin"]}），而NgRx的createEffect默认会把流中的每个值当作Action去分发。这个payload不是合法的Action（缺少type属性），所以控制台抛出错误。

问题出在这行代码：

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

map把原始的GO Action转换成了payload对象，后续流输出的就是这个对象，被NgRx误当作要分发的Action。而tap只是执行导航的副作用，不会改变流的输出内容。

修复方案 #

给这个Effect添加{ dispatch: false }配置，明确告诉NgRx：这个Effect只执行副作用（导航），不需要分发任何Action。

修改后的代码：

navigate$ = createEffect((): Observable<void> => {
    return this.actions$.pipe(
        ofType(RouterActions.GO),
        tap((action: RouterActions.Go) => {
          const { path, query: queryParams, extras } = action.payload;
          this.router.navigate(path, { queryParams, ...extras });
        })
    );
}, { dispatch: false }); // 关键配置：禁用Action分发

额外优化 #

• 去掉多余的map操作，直接在tap里解构Action的payload，减少不必要的流转换。
• 把返回类型从any改为Observable<void>，让类型定义更严谨。

这样修改后，导航功能正常执行，同时不会触发无效Action的错误。

内容的提问来源于stack exchange，提问作者Ian Tunbridge