Currently, I am delving into the world of NgRx and grappling with a concept that has been puzzling me. As I create an Effect and dispatch an action, the createEffect function comes into play. What throws me off is the dispatch configuration within createEffect, which according to the NgRx documentation, has a boolean parameter:
The config controls whether the action emitted by the effect is sent to the store. If set to false, the effect does not need to return type
Observable<Action>.
If we consider the default setting where dispatch is true, it triggers an action, initiating the execution of createEffect(), consequently leading to another action emission. With dispatch still being true, this sets off an ongoing recursive loop.
Let's examine this through a reproducible example:
Sample Action:
export const incrementByN = createAction('[Counter Component] Increment With N', props<{value: number}>())
Sample Reducer:
export let counterReducer = (state = initialState, action: CounterActions | Action): number => {
if (action.type === '[Counter Component] Increment') {
return state + (action as CounterActions).value
}
return state
}
Sample Effect:
@Injectable()
export class CoutnerEffect {
saveCount = createEffect(() => {
return this.actions$.pipe(
ofType(incrementByN, decrement),
tap(action => {
console.log(action)
})
)
})
constructor(private actions$: Actions) {}
}
However, I suspect there might be a memory leak issue when dispatch is left at its default value of true.