拦截发送到 NgRx Store 的所有操作

Intercepting all action sent to the NgRx Store

我是 NgRx 的新手。 我编写了一些代码,但结果并不完全符合预期。 我想拦截使用 dispatch() 函数发送到商店的每个操作。

我的目标如下:

  1. 在自定义效果中拦截发送到商店的每个动作,并在不修改动作的情况下将文本(拦截动作...)打印到控制台。 (处理此操作的 Effect 应该可以正常工作。)
  2. 如果动作(之前发送到 store)完成了它的工作(即相应的 Reducer 对 store 进行了修改),我也想对此“做出反应”,并打印另一条消息(Got state from存储。) 在控制台上

我的代码有 2 个问题:

  1. 文本出现的顺序错误(即首先是“从存储中获取状态”,然后是“拦截操作...”,然后再次是“从存储中获取状态”)。
  2. 为了拦截每个动作,我制作了一个包含应用程序中定义的所有动作的数组,并使用该数组调用 ofType()。如果实施新操作,我必须手动更新此数组。有没有办法直接从商店中检索已注册的操作?

代码如下:

app.module.ts

//to register the Effect to intercept the actions
imports: [
EffectsModule.forRoot([InterceptorEffects]),
]

app.component.ts

//here I react to the changes of the store
_interceptorSubscription: Subscription;
this._interceptorSubscription = _store.pipe(select((state, props) => console.log("Got state from store.")) );

interceptor.effect.ts

//the Effect that should intercept every action
@Injectable({ providedIn: "root" })
export class InterceptorEffects {
    private readonly _interceptAllAction$ = createEffect(() =>
        this._actions.pipe(
            ofType(...[JobActions.downloadResultAction, JobActions.deleteJobAction]),
            tap(() => console.log("Intercepting action..."))
        )
        , { dispatch: false } );

    constructor(private _actions: Actions) {}
}

感谢您的任何建议。

请问您为什么需要这个? 回答问题:

  1. 据我所知你不能这样做。一个 action 首先到达所有 reducer,然后由 effects 处理。如果您想在操作到达 reducer 之前注册操作,请查看 meta reducers。

  2. 要对效果中的所有动作做出反应,请不要使用 ofType 运算符,只需订阅动作流即可。