Performance Issues with Dev Tools + Router-Store #97
Comments
|
This is because the router state stores the That object is huge, holding components, router tress and more goodies. Redux dev tools tries to render it (json) deep which is a huge task. It probably holds circular references which I don't know if the dev tools handles or not, but anyway its a heavy task. |
|
+1, I had to disable Redux DevTools extension to be able to work on app... |
|
+1 Likewise, unusable with router-store. Once i removed the router from state, its fine. |
|
so I just the ngrx-store-logger. there is a big performance problem to integrate with Redux DevTools |
|
Same here, on first init with redux dev tools opened the app crashes. Afterwards it is noticeable slower with devtools activated. |
|
I've had similar probably with large objects in Redux Devtools previously. A way we can get around it is to wrap router states so they implement As long as we implement this on the router store object specifically (without messing with the snapshots), this shouldn't have any downstream consequences. E.g. in return {
state: action.payload.routerState,
navigationId: action.payload.event.id,
};to return new StoreRouterState(
action.payload.routerState,
action.payload.event.id,
);and then implementing StoreRouterState something like: class RouterState {
constructor(public state: RouterStateSnapshot, public id: number) {}
toJSON() {
// Truncate router object however
return {state: {url: 'foo'}, id: this.id};
}
}Whether this is actually a good idea is another matter entirely. A better solution might be to allow a deserializer map to be passed to store devtools. @brandonroberts any insight here? Can this be accomplished with |
|
Any news on @bfricka suggestions? I think that might work. |
|
@bfricka I talked with @vsavkin about this issue and we're going to implement a serializer for the This will make it easier to work with the Devtools, as if you only need the URL, the payload will be significantly smaller. |
|
Do we have an ETA for this issue? |
|
This also makes it impossible to serialize the state via JSON.stringify since there are circular references: |
This adds a serializer that can be customized for returning the router state snapshot. By default, the entire RouterStateSnapshot is returned. Documentation has been updated with example usage.
```ts
import { StoreModule } from '@ngrx/store';
import {
StoreRouterConnectingModule,
routerReducer,
RouterStateSerializer
} from '@ngrx/router-store';
export interface RouterStateUrl {
url: string;
}
export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
serialize(routerState: RouterStateSnapshot): RouterStateUrl {
const url = routerState ? routerState.url : '';
// Only return an object including the URL
// instead of the entire snapshot
return { url };
}
}
@NgModule({
imports: [
StoreModule.forRoot({ routerReducer: routerReducer }),
RouterModule.forRoot([
// routes
]),
StoreRouterConnectingModule
],
providers: [
{ provide: RouterStateSerializer, useClass: CustomSerializer }
]
})
export class AppModule { }
```
Closes #97, #104, #237
|
Anyone looking for an ETA on this issue, feel free to take a look at the following documentation. It offers a solution using a Custom Router State Serializer. Update 9/21/2019: for RxJs and up can go to (https://ngrx.io/guide/router-store/configuration#custom-router-state-serializer) |
|
News guys ? |
Update note on issue ngrx#97 in MIGRATION.md Update examples to RxJS 6 Edit and clean up
I've found that my app becomes quite slow if
StoreRouterConnectingModuleandStoreDevtoolsModuleare both imported.Observations
maxAge: 50, changing it to as low asmaxAge: 2didn't help.EffectsModuleandStoreRouterConnectingModule.StoreRouterConnectingModulewas removed, it was 71 KB.Profiling Results
Top of call tree:
Next highest in tree:
Versions
Angular: 4.2.6
Angular CLI: 1.2.1
NGRX: 4.0.0
Browser: Chrome 59.0.3071.115
OS: macOS 10.12.5
Node: 6.11.0
Yarn: 0.27.5
The text was updated successfully, but these errors were encountered: