search

ngrx / store-devtools

Developer Tools for @ngrx/store
MIT License
326 stars 38 forks source link

Early dispatch call get lost when using store-devtools #39

Closed klaascuvelier closed 7 years ago

klaascuvelier commented 7 years ago

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

with devtools logs with devtools

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: https://github.com/ngrx/store-devtools/blob/58f3ea62d93bd639c64d14cb765503907e021395/src/devtools.ts#L64

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?

klaascuvelier commented 7 years ago

Apparently this is not the case anymore in version 3.2.2. Using a ReplaySubject in https://github.com/ngrx/store-devtools/commit/d4a6382d54c1c97ac7b2bdfe08c4cbf38c839ca2 fixed it.