升级到 9.0 和 angular 7 后修复 angular-redux/store
Posted
技术标签:
【中文标题】升级到 9.0 和 angular 7 后修复 angular-redux/store【英文标题】:Fix angular-redux/store after upgrade to 9.0 and angular 7 【发布时间】:2019-08-29 19:02:13 【问题描述】:我已经接管了一个现有的 Angular 应用程序,我正在从 5 更新到版本 7。对于状态管理,它使用已更新到版本 9.0 的 @angular-redux。但是,保持商店不变会导致应用无法加载(没有控制台错误)。
我已经更改了每个史诗中的功能,如终端中告知的代码所示。但是,我还没有找到关于如何调整项目正在运行的主 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)];
【问题讨论】:
【参考方案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();
享受!!
【讨论】:
以上是关于升级到 9.0 和 angular 7 后修复 angular-redux/store的主要内容,如果未能解决你的问题,请参考以下文章
如何在生产版本上升级 Angular 7 后修复“错误:模板解析错误:找不到管道‘异步’”
升级到 Angular 10 - 修复 CommonJS 或 AMD 依赖项可能导致优化救助
Angular 10 升级 - 修复 CommonJS 或 AMD 依赖项可能导致优化救助
将 Swiper 6 升级到 7 后,在单元测试(开玩笑)上找不到模块“swiper_angular”
从 Angular 7 升级到 Angular 8 后,我的管道测试停止工作:TypeError: undefined is not iterable