NgRx Effect开启dispatch是否会导致内存泄漏？

问题背景 #

学习NgRx时遇到一个疑问：创建Effect并分发Action时，createEffect会执行。已知createEffect的配置里有个布尔类型的dispatch参数，NgRx文档说明：

决定Effect发出的action是否分发到Store。若为false，Effect无需返回Observable类型。

假设dispatch用默认值true，是不是意味着Effect发出的Action会再次触发自身执行，进而形成无限递归循环，最终导致内存泄漏？以下是复现示例：

示例Action

export const incrementByN = createAction('[Counter Component] Increment With N', props<{value: number}>())

示例Reducer

export let counterReducer = (state = initialState, action: CounterActions | Action): number => {
    if (action.type === '[Counter Component] Increment') {
        return state + (action as CounterActions).value
    }
 
    return state
}

示例Effect

@Injectable()
export class CoutnerEffect {
    saveCount = createEffect(() => {
        return this.actions$.pipe(
            ofType(incrementByN, decrement), 
            tap(action => {
                console.log(action)
            })
        )
    })
    constructor(private actions$: Actions) {}
}

解答 #

你的示例代码确实会触发无限循环，进而导致内存泄漏，但这是有特定条件的——当Effect返回的Action正好被自身的ofType监听时，才会形成循环。

原理说明

当dispatch设为默认的true时，Effect返回的Observable中的每一个Action都会被分发到Store。如果这个Action恰好是当前Effect通过ofType监听的类型，就会触发Effect再次执行：

1. 初始Action被分发到Store
2. Effect监听到该Action，执行逻辑后返回同一个（或被自身监听的）Action
3. 这个Action被重新分发到Store，再次触发Effect
4. 循环往复，无限执行，最终导致内存泄漏

你的示例里，Effect监听了incrementByN和decrement，并且返回的流是经过tap处理后的原Action流（tap不会修改流的内容），所以每次Effect执行后都会把原Action重新分发，自然会触发无限循环，控制台会不断打印Action。

解决方法

• 如果不需要分发新Action：比如只是做日志、本地存储这类副作用操作，直接把dispatch设为false即可，此时Effect不需要返回Observable<Action>类型：

@Injectable()
export class CoutnerEffect {
    saveCount = createEffect(() => {
        return this.actions$.pipe(
            ofType(incrementByN, decrement), 
            tap(action => {
                console.log(action)
            })
        )
    }, { dispatch: false }) // 关闭dispatch
    constructor(private actions$: Actions) {}
}

• 如果需要分发Action：确保返回的Action不是当前Effect监听的类型，避免触发自身，打破循环。

内容的提问来源于stack exchange，提问作者Issac Howard