My Angular NGRX reducer updates the state, but the associated effect doesn't trigger - but...

I'm going to try and be as thorough as I can describing the issue I'm having. I'm working in an enterprise proprietary codebase so there's not much actual code I can share, but I'll do my best if there's specific things people want to see.

I have a component that has several dropdowns each of which change the ngrx state's unappliedValues. That component also has an "Apply" button which dispatches an apply action. The reducer copies unappliedValues to appliedValues, and then the effect does stuff with the new appliedValues.

We'll call that component applyComponent so I can reference it later.

That component is nested on a bunch of parent components in our system. It works properly on all of them.

We have a newish parent component (which I'll call parentComponent) that now contains applyComponent.

When parentComponent loads, it loads a bunch of values from the cache, puts them into unappliedValues and then dispatches the apply action as part of its ngOnInit. When that happens, the apply action correctly triggers both the reducer and the effect.

Then, if we change values in the dropdown, and hit the apply button, the apply action is correctly dispatched, but it only triggers the reducer and not the effect. Once we get into that state, the apply action never triggers the effect. Even if we navigate to another page and click the apply button there, the reducer triggers but the effect doesn't. If we navigate back to parentComponent, the ngOnInit apply action now also only hits the reducer but never the effect.

If we go to any other page and refresh, the apply action works how it's supposed to. It only breaks when we go to parentComponent and hit the Apply button in applyComponent, but when it breaks, it fully breaks the apply action in the entire application such that it only triggers the reducer and never the effect.

I have tried everything I can think of to get this to work. We've almost completely rewritten the component at this point and nothing will get it to work right. There don't seem to be any infinite loops or anything. The state is updating accurately and all of the components are updating based on the state updates in the reducer.

So my question is this: What kinds of things should I be looking for in my code? How can I figure out why the reducer is working but the effect isn't (but only sometimes)?

Continue reading...