升级到 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

Sony XZP 8.0升级到9.0