Chrome Redux DevTools вылетает при изменении маршрута - PullRequest
Новая
       8

Chrome Redux DevTools вылетает при изменении маршрута

0 голосов
/ 04 января 2019

После обновления NgRx до 6.1.0 с 4 я вижу проблему с Redux DevTools Extension. Он падает каждый раз, когда меняется маршрут.

Я добавил сериализатор ссылка что документация рекомендована, но проблема все еще существует

Мне пришлось изменить способ предоставления CustomSerializer в соответствии с этой статьей ссылка потому что моя IDE показала ошибку, если я попытался реализовать именно так, как показала документация

Я также пытался использовать без storeFreeze и опускал объект metaReducer внутри StoreModule.forRoot (), но проблема все та же 

// reducers/index.ts
import { ActionReducerMap, MetaReducer } from '@ngrx/store';
import { storeFreeze } from 'ngrx-store-freeze';
import { Params, RouterStateSnapshot } from '@angular/router';

import {
  routerReducer,
  RouterReducerState,
  RouterStateSerializer
} from '@ngrx/router-store';

export interface RouterStateUrl {
  url: string;
  params: Params;
  queryParams: Params;
}

@Injectable()
export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
    let route = routerState.root;

    while (route.firstChild) {
      route = route.firstChild;
    }

    const {
      url,
      root: { queryParams }
    } = routerState;
    const { params } = route;

    // Only return an object including the URL, params and query params
    // instead of the entire snapshot
    return { url, params, queryParams };
  }
}

export interface State {
  router: RouterReducerState<RouterStateUrl>;
}

export const reducers: ActionReducerMap<State> = {
  router: routerReducer
};

export const metaReducers: Array<MetaReducer<State>> = environment.environment !== EnvironmentEnum.PRODUCTION ? [storeFreeze] : [];


// app-routing.module.ts
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes,
      { preloadingStrategy: PreloadAllModules })
  ],
  exports: [
    RouterModule
  ]
})


// app.module.ts
import { AppRoutingModule } from './app-routing.module';
import { metaReducers, reducers, State } from './reducers';

@NgModule({
  imports: [
    //Other imports
    AppRoutingModule,
    StoreModule.forRoot(reducers, { metaReducers }),
    StoreRouterConnectingModule,
    StoreDevtoolsModule.instrument(),
    EffectsModule.forRoot([sharedEffects.UserEffects])
  ],
  providers: [
    {
      provide: RouterStateSerializer,
      useClass: CustomSerializer
    }
  ]
})

1 Ответ

0 голосов
/ 07 января 2019

Хорошо, Ниджат. Я бездельничал с моей настройкой и заставил ее работать без сбоев dev-tools. В моем импорте в app.module.ts теперь у меня есть следующее: 

imports: [
StoreRouterConnectingModule.forRoot({
  serializer: CustomSerializer,
}),

StoreDevtoolsModule.instrument({
  maxAge: 25, // Retains last 25 states
  logOnly: environment.production, // Restrict extension to log-only mode
}),
]

Я также удалил его из массива «провайдеры» в модуле приложения. У меня также нет сериализатора, помеченного как @ Injectable.

Надеюсь, это поможет вам.

Приветствие MP

...