Store devtools show initialstate of a lazy loaded slice of state instead of actual state.

[diegomaninetti]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[*] Bug report  
[ ] Feature request
[ ] Documentation issue or request

What is the current behavior?

When a new reducer get loaded with StoreModule.forFeature(), checking the initial state (corresponding to @ngrx/store/init action), the state contains all the initialized states after first loading of the feature reducer.

Expected behavior:

Devtools should show the correct state relative to the selected action in devtools app.

Minimal reproduction of the problem with instructions:

https://github.com/ngrx/platform/tree/master/example-app

• Activate devtools in browser
• Reload page at http://localhost:4200/#/asdasd url (BooksModule not loaded).
• Click on @ngrx/store/init in devtools and see the state (no "books" property).
• Navigate to home (click on "Take me home")
• Click on @ngrx/store/init in devtools and see the state ("books" state populated).

(see attached images)

Version of affected browser(s),operating system(s), npm, node and ngrx:

Chrome Version 61.0.3163.100, windows 10, ngrx/* 4.0.x, devtools 2.15.1

[phillipzada]

Hi @diegomaninetti,
The reason the BooksModule/State is loading is if you look at the history, when you click Take me home it is navigating to the books module/feature and being immediately redirected back to the login module/feature by the Guard which checks if your logged in. Also its worth noting with Feature States they are not unloaded when you go to another section. Does this solve your issue?

[diegomaninetti]

Thank's @phillipzada

My issue regards the "regression" to the state history BEFORE the module loading.
The "books" slice is correctly loaded, but if I select an action dispatched before the module was loaded (e.g. @ngrx/store/init) I would like to see the state of the store as it were when the action was dispatched and not as when the first initial state was created.

The problem is the difference between the state shown in the first image and the one shown in the second image: they should be identical regardless of the actions dispatched in the meantime.

[phillipzada]

@diegomaninetti I think i figured out what is going on here. When you initially load the app you are redirected to NotFound page, i.e root state is loaded.

Then when you click "Take Me Home" is redirecting to routerLink="/" meaning the app is reloaded (similar to hitting F5) so the root module is reloaded at the new url which in this case loads the BooksModule as it is the default route:

export const routes: Routes = [
  { path: '', redirectTo: '/books', pathMatch: 'full' },
  {
    path: 'books',
    loadChildren: './books/books.module#BooksModule',
    canActivate: [AuthGuard],
  },
  { path: '**', component: NotFoundPageComponent },
];

This can be seen in the timestamp to the right of the action type it is changed implying a different action entirely. You can if you edit the routerLink property on the not-found component to say routerLink="/books" the page won't reload and you will see your desired workflow.

I'm not sure if this is an intended angular feature to "reload" when routerLink="/"

Hope this helps

[diegomaninetti]

@phillipzada, as far as I know, navigating to "/" does not reload application.
Application was not reloaded at all. Timestamps are updated every time I hover or select actions (I don't know if it's a bug of devtools extension).

In any case, I expect that selecting an action will show the status of the store when the action is executed.
This works well for example with the ROUTER_NAVIGATION action but not with other actions.

Thank's
Diego