angular - 如何使 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) 高级模块.ts

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

5) 消息传递.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 路由以禁用延迟加载并直接加载组件，它就可以工作(当然，这将炸毁 AdvancedModule 中配置的所有路由):

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

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

问题:如何使 ng2-redux 在 Angular 4 SPA 中与模块延迟加载配合使用？

Answer 1

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

Replace @select with ngRedux.getState()

---

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

尝试使用 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();
    }
}

---

如果上述方法未能解决问题:

1. 确保仅在 app.module.ts 中导入 NgReduxModule
2. 在组件中，您只需要 NgRedux - 不要导入 NgReduxModule
3. 使用 package.json 的其余部分和文件中的导入更新您的问题