I am using these versions or ngrx/store
and related libs (in an Angular 2 application):
"@ngrx/core": "^1.2.0",
"@ngrx/store": "^2.2.1",
"@ngrx/store-devtools": "^3.1.0",
"@ngrx/store-log-monitor": "^3.0.2",
When my app container loads, I launch a request for data to the API and dispatch an action to set the state of my application.
Everything goes well when I am not using the store-devtools
, but when I use store-devtools
I noticed the initial dispatches somehow get "lost", they don't reach reducers, and don't reach the store.
I have these 2 screenshots. I added some logging in 1 of my reducers (popular content reducer
the type of the action). I also added a console log before I do request the data from the API, the line says dispatch load state for popular content
. Immediately after that log, I dispatch an action.
The first screenshots is without devtools, the action for the loading state comes through, the 2nd screenshot is with devtools, then the action does not come through.
without devtools
![logs without devtools](https://camo.githubusercontent.com/63d721199dc7d4b244a5b97b07f4f4a64f1b9aac77b1bfdffde2c500e598e96f/687474703a2f2f692e696d6775722e636f6d2f6344575152766e2e706e67)
with devtools
![logs with devtools](https://camo.githubusercontent.com/10dd3122b36756972604a744c2ac049be5613e92c66fdc916db62d6cbb93684e/687474703a2f2f692e696d6775722e636f6d2f456a35616642492e706e67)
So with the store-devtools
enabled, the action dispatched does not reach the reducer.
I started doing some debugging, I noticed that in ngrx/store
, the State
object is a BehaviourSubject
and is automatically subscribed to: https://github.com/ngrx/store/blob/master/src/state.ts#L20
For ngrx/store-devtools
the State
object is a regular observer without any subscriptions:
|
const state = map.call(liftedState, unliftState); |
So, this can help me explain the issue, when dispatching the load action from my application container, routing has not been done, and there is no component subscribing to the state yet, so when dispatching an action, nothing happens as observables don't do anything until they are subscribed on. Which is not the case for store-devtools
but which is the case for store
.
(In my opinion it's not bad practice to dispatch an action to update the application state before there are components listening for it)
I tried adding a subscribe
on the state$
object in my devtools
and that does fix my issue.
Is there a specific reason devtools
does not use BehaviourSubject
for the state object?
I have the feeling adding an "empty" subscribe on the state$
is not the prettiest solution.
Am I the first person running in to this problems or am I approaching this incorrectly?