如何使 ng2-redux 在 Angular 4 SPA 中使用模块延迟加载？

Question

我正在尝试在使用延迟加载 (loadChildren) 的小型 Angular 4 应用程序中引入 Redux，但我无法使其工作：

1)相关配置(package.json)

"@angular/common": "4.4.5",
"@angular/compiler": "4.4.5",
"@angular/compiler-cli": "4.4.5",
"@angular/core": "4.4.5",
"@angular/router": "4.4.5",
"@ngtools/webpack": "1.5.0",
"@types/webpack-env": "1.13.0",
"angular2-template-loader": "0.6.2",
"ng2-redux": "^5.1.2",
"redux": "^3.7.2",

2) app.module.ts

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserAnimationsModule,
        CustomCoreModule,
        NgReduxModule,
        AdvancedModule,
        AppRoutingModule,
    ],
    providers: [

    ]
})

export class AppModuleShared {
    constructor(
        private ngRedux: NgRedux<IAppState>,
        private devTools: DevToolsExtension) {

        var enhancers = isDevMode() ? [devTools.enhancer()] : [];
        console.log("AppModuleShared configuring store", this.ngRedux);
        ngRedux.configureStore(rootReducer, INITIAL_STATE, [] /*, enhancers */);
    }
}

3) app-routing.module.ts（不工作）

export const routes: Routes = [
    { path: 'advanced', loadChildren: () => AdvancedModule }, 
    { path: '**', component: PageNotFoundComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { enableTracing: true, preloadingStrategy: PreloadAllModules })],
    exports: [RouterModule]
})
export class AppRoutingModule { }

4) advanced.module.ts

@NgModule({
    imports: [CommonModule, SharedModule, TodosModule, MessagingModule, AdvancedRoutingModule],
    declarations: [AngularMaterialTestComponent, ReduxTestComponent, TableTestComponent],
    providers: []
})
export class AdvancedModule { }

5) messaging.module.ts

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [MessagesComponent],
  exports: [MessagesComponent]
})
export class MessagingModule { }

6) messages.component.ts

@Component({
    selector: 'app-messages',
    templateUrl: './messages.component.html',
    styleUrls: ['./messages.component.css']
})
export class MessagesComponent {
    @select((s: IAppState) => s.messaging.messaging.newMessages) newMessages: Observable<any>;

    constructor(private ngRedux: NgRedux<{}>) {
        console.log("MessagesComponent started", this.ngRedux);
    }

    increment() {
        this.ngRedux.dispatch({ type: INCREMENT });
    }

    decrement() {
        this.ngRedux.dispatch({ type: DECREMENT });
    }
}

当我尝试递增时失败并出现以下错误：

Dispatch failed: did you forget to configure your store? https://github.com/angular-redux/ng2-redux/blob/master/README.md#quick-start

this.ngRedux 在这种情况下与 app.module.ts 中的不同（例如 _store 为 null 而不是具有值），所以很明显我没有收到正确的实例。

如果我在app-routing.module.ts中更改advanced路由以禁用延迟加载并直接加载组件，它可以工作（当然，这会炸毁所有在[=23中配置的路由=]):

{ path: 'advanced', loadChildren: () => AdvancedModule, component: ReduxTestComponent }

我的感觉是，像我这样执行存储配置还为时过早，但我不知道何时以及如何执行延迟加载模块的初始化才能从中受益。

问题： 如何让 ng2-redux 在 Angular 4 SPA 中使用模块延迟加载？

Answer 1

我曾经遇到过类似的问题。 Angular 仅在使用 @select 时抛出错误，但问题所在并不明显。

Replace @select with ngRedux.getState()

您还应该在 messages.component.ts 中传递 IAppState 作为 NgRedux 的接口，而不是 {}

为 messages.component.ts 尝试此代码：

export class MessagesComponent implements OnDestroy {
    newMessages: any;

    constructor(private ngRedux: NgRedux<IAppState>) {
       this.storeUnsubscribe = ngRedux.subscribe(() => {
         this.newMessages = ngRedux.getState().messaging.messaging.newMessages;
       });
    }

    increment() {
        this.ngRedux.dispatch({ type: INCREMENT });
    }

    decrement() {
        this.ngRedux.dispatch({ type: DECREMENT });
    }

    ngOnDestroy() {
        // Unsubscribe on component destroy to prevent memory leaks
        this.storeUnsubscribe();
    }
}

如果以上没有解决问题：

确保只在 app.module.ts

NgReduxModule

在一个组件中，你只需要 NgRedux - 不要导入 NgReduxModule
用 package.json 的其余部分更新您的问题并导入文件

如何使 ng2-redux 在 Angular 4 SPA 中使用模块延迟加载？

How to make ng2-redux work with module lazy loading within an Angular 4 SPA?

lazy-loading

redux

angular