首页 > 解决方案 > Angular:Redux and Lazy loading

问题描述

I am using the design pattern of Redux with Angular and I find it very useful, but how redux and lazy loading can leave toghether?

标签: angulartypescriptredux

解决方案


鉴于您没有说明您是否正在使用或计划使用 ngrx 或 angular-redux,我将假设更流行的 ngrx。

使用 ngrx,您可以加载减速器并影响初始化。默认情况下,/src/app/reducers/index.ts 将定义你的减速器,如下所示:

export interface AppState {
  router: any,
  simpro: BimState,
  omnipresent: OmniState,
  user: UserState
}

export const reducers: ActionReducerMap<AppState> = {
  router: routerReducer,
  simpro: bimReducer,
  omnipresent: omniReducer,
  user: userReducer
}

这里定义的 state 和 reducer 总是可以访问的。

但是,如果您有一部分状态仅与单个延迟加载的路由模块有关,那么您可以将状态和减速器添加到该特定模块。

以这种方式加载的状态和减速器仅在相关路由被激活并加载模块时才会生效/出现在 Redux Devtools 状态树中。因此,您必须确保它们不会在它们可能尚不存在的任何代码中被访问,例如在另一个延迟加载的模块中。

类似的逻辑适用于效果,它们可以加载到根模块或延迟加载的模块中。


推荐阅读