Исправьте angular-redux / store после обновления до 9.0 и angular 7

Question

Я принял существующее угловое приложение, которое я нахожусь в процессе обновления до версии 7 из 5. Для управления состоянием используется @ angular-redux, который был обновлен до версии 9.0.Однако сохранение хранилища как есть привело к тому, что приложение не загружалось (без ошибок консоли).

Я изменил функцию в каждом отдельном эпосе, как показано в коде, как указано в терминале.Однако я не нашел ресурса о том, как адаптировать основной файл store.ts, который запускает проект, который нарушает работу приложения.Если кто-то знает, что поместить в этот файл, чтобы правильно настроить хранилище, пожалуйста, поделитесь.

store.ts:

import { NgModule } from "@angular/core";
import {
  NgReduxModule,
  NgRedux,
  DevToolsExtension
} from "@angular-redux/store";
import { NgReduxRouterModule, NgReduxRouter } from "@angular-redux/router";
// The top-level reducers and epics that make up our app's logic.
import { IModel, initialData } from "./model";
import { rootReducer } from "./reducer";

import { Epic } from "./epic";
import { StorageService } from "./storage-service";
// DataModels
import { ApplicationStateModule } from "./application-state/module";
import { EntitiesModule } from "./entities/module";
import { LiveDataModule } from "./live-data/module";
import { RouterModule } from "./router/module";
import { StoreSelectors } from "./selectors";
import { TimePeriodModule } from "./time-period/module";
import { TimeSeriesDataModule } from "./time-series-data/module";
import { SelectorsModule } from "../selectors/selectors.module";
import { PointInTimeModule } from "./point-in-time/module";
import { applyMiddleware, createStore } from "redux";
import { createEpicMiddleware } from "redux-observable";

@NgModule({
  imports: [
    NgReduxModule,
    NgReduxRouterModule.forRoot(),
    ApplicationStateModule,
    EntitiesModule,
    LiveDataModule,
    RouterModule,
    ...Module,
    ...Module,
    ...Module,
    ...Module
  ],
  providers: [Epic, StoreSelectors, StorageService]
})
export class Store {
  constructor(
    public store: NgRedux<IModel>,
    devTools: DevToolsExtension,
    ngReduxRouter: NgReduxRouter,
    rootEpic: Epic,
    storageService: StorageService
  ) {
    store.configureStore(
      rootReducer,
      storageService.fromStore(initialData),
// the commented code below breaks the app if either line is uncommented
      // [...rootEpic.createEpics()],

      // devTools.isEnabled() ? [devTools.enhancer()] : []
    );
    if (ngReduxRouter) {
      ngReduxRouter.initialize();
    }
  }
}

Вот пример одного изконкретные файлы epic.ts:

import { Injectable } from '@angular/core';
import { Actions } from './actions';
import { Actions as ApplicationStateActions } from '../applicationstate/actions';
import { createEpicMiddleware } from 'redux-observable';
import { createStore, applyMiddleware } from 'redux';
import { rootReducer } from '../reducer';

@Injectable()
export class Epic {
  constructor(
    private actions: Actions,
    private applicationStateActions: ApplicationStateActions
  ) {}

  load = (action$) =>
    action$
    .ofType(Actions.SET_DATES_AVAILABLE)
      .map((action) => {
        return this.actions.setUnit(2);
      })
    .ofType(Actions.SET_UNIT)
      .map((action, state) => {
        return this.applicationStateActions.updateTimePeriodStatus('ready');
      })

  public createEpics() {
  const epicMiddleware = createEpicMiddleware();
  const store = createStore(rootReducer, applyMiddleware(epicMiddleware));
// tslint:disable-next-line: no-void-expression
 return [epicMiddleware.run(this.load)];

//below is the original way it was, above is the change the terminal said to do,
//see https://github.com/redux-observable/redux-observable/blob/master/MIGRATION.md

// return [createEpicMiddleware(this.load)];

  }
}

Answer 1

В случае, если это кому-нибудь поможет, это последний способ, которым код выглядел для работы.

RootEpic.ts:

import { Injectable } from "@angular/core";
import { Epic as xxxxxStateEpic } from "./application-state/epic";
import { Epic as bbbbbbEpic } from "./entities/epic";
import { Epic as ggggggEpic } from "./live-data/epic";
import { Epic as fffffEpic } from "./time-period/epic";
import { Epic as dddddDataEpic } from "./time-series-data/epic";
import { Epic as qqqqqqEpic } from "./point-in-time/epic";

@Injectable()
export class RootEpic {
  constructor(
    private xxxxxStateEpic: xxxxxStateEpic,
    private bbbbEpic: bbbbbEpic,
    private gggggEpic: gggggEpic,
    private fffffEpic: ffffffEpic,
    private ddddddData: ddddddEpic,
    private qqqqqEpic: qqqqqqqEpic
  ) {}

  public createEpics() {
    return [
      ...this.gggggEpic.createEpics(),
      ...this.bbbbbbEpic.createEpics(),
      ...this.fffffffEpic.createEpics(),
      ...this.xxxxxStateEpic.createEpics(),
      ...this.qqqqqqqEpic.createEpics(),
      ...this.dddddData.createEpics()
    ];
  }
}

каждый конкретный эпос заканчивается:

myEpic = (action$, state$) =>
...... end of myEpic,

 createEpics(){
return [this.myEpic];
}

наконец, файл store.ts должен выглядеть следующим образом

@NgModule({
  imports: [
    NgReduxModule,
    NgReduxRouterModule.forRoot(),
   ...(list out modules here)
  ],
  providers: [RootEpic, StoreSelectors, StorageService]
})
export class Store {
  constructor(
    public store: NgRedux<IModel>,
    devTools: DevToolsExtension,
    ngReduxRouter: NgReduxRouter,
    rootEpic: RootEpic,
    storageService: StorageService
  ) {
    const epicMiddleware = createEpicMiddleware();

    store.configureStore(
      rootReducer,
     storageService.fromStore(initialData),
     [epicMiddleware],
      devTools.isEnabled() ? [devTools.enhancer()] : []
    );

    epicMiddleware.run(combineEpics(...rootEpic.createEpics()));
    if (ngReduxRouter) {
      ngReduxRouter.initialize();
    }
  }
}

Наслаждайтесь !!