Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider removing the RouterStateSnapshot from router-store state #104

Closed
shlomiassaf opened this issue Jul 19, 2017 · 0 comments
Closed

Comments

@shlomiassaf
Copy link

shlomiassaf commented Jul 19, 2017

Hi,

Using v4 I saw the the router state that comes in @ngrx/router-store has a state property that holds a reference to RouterStateSnapshot from @angular/router.

I'm not sure why the state needs to hold this object but it causes some issues.

  • In Performance Issues with Dev Tools + Router-Store #97 we can see a performance issue, this is probably due to the RouterStateSnapshot object, pretty sure about that... the redux dev tool try to render it and its a huge object when rendering deep.

  • The store can not be frozen.

The RouterStateSnapshot hold reference to a lot of objects... components, router tree's and what not. A lot of them change internally, i.e. get's mutated which makes the store mutable.

This means using a library like ngrx-store-freeze in development mode is not possible since deep freezing the store (state) will result in exceptions all over since deep objects in RouterStateSnapshot are expected to be mutable.

In general the store should be light, holding POCOs only.

cc @vsavkin, thoughts?

@brandonroberts brandonroberts marked this as a duplicate of #209 Jul 28, 2017
brandonroberts added a commit that referenced this issue Aug 6, 2017
This adds a serializer that can be customized for returning the router state. By default, the entire RouterStateSnapshot is returned. A custom serializer can be provided to parse the snapshot into a more managable structure.

Closes #104, #97
brandonroberts added a commit that referenced this issue Aug 6, 2017
This adds a serializer that can be customized for returning the router state. By default, the entire RouterStateSnapshot is returned. A custom serializer can be provided to parse the snapshot into a more managable structure.

Closes #104, #97
MikeRyanDev pushed a commit that referenced this issue Aug 9, 2017
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants