我已经接管了一个现有的angular应用程序,我正在将其从5更新到版本7。对于状态管理,它使用的是@ 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)];
}
}
答案 0 :(得分:0)
以防万一,这是代码正常工作的最终方式。
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();
}
}
}
享受!