Question

我已经花了2天的时间来撰写featureA（“方案”）模块和嵌套FeatureB（“ intents”）模块的状态。

这是我的状态的理想结构（结构1）：

{
  authentication: { ... },
  router: { ... },
  scenarios: {
    resources: { ids: { ... }, entities: { ... } },
    intents: {
      resources: { ids: { ... }, entities: { ... } }
    }
  }
}

我也会对（结构2）感到满意：

{
  authentication: { ... },
  router: { ... },
  scenarios: { ids: { ... }, entities: { ... } },
  intents: { ids: { ... }, entities: { ... } },
}

尽管它不能反映我模块的结构。

结构1的问题是scenarios/reducers/index.ts暴露了ActionReducerMap，scenarios/modules/intents/reducers/index.ts也暴露了ActionReducerMap，但我不知道如何构成它们。由于类型冲突，我尝试过的所有内容甚至都无法编译。

结构2的问题在于状态的intents部分由于在第一次页面加载时未加载IntentsModule以及应用程序的其他约简操作而一直被退出状态工作。

代码如下：

/scenarios/scenarios.module.ts ：

import { reducers, getInitialState } from './reducers';

@NgModule({
  imports: [
    ...,

    ScenariosRoutingModule,

    StoreModule.forFeature('scenarios', reducers, { initialState: getInitialState }),
    EffectsModule.forFeature([ScenariosEffects]),
  ],
})
export class ScenariosModule {}

/场景/reducers/index.ts：

import * as fromRoot from '../../../app.reducers';
import * as fromScenarios from './scenarios.reducers';
import * as fromIntents from '../modules/intents/reducers';

export interface ScenariosState {
  resources: fromScenarios.State;
  intents: fromIntents.IntentsState;
}

export interface State extends fromRoot.State {
  scenarios: ScenariosState;
}

export const reducers: ActionReducerMap<ScenariosState> = {
  resources: fromScenarios.reducer,
  intents: fromIntents.reducers, <-- This is the part with types conflicts
};

/scenarios/modules/intents/intents.module ：

import { reducers, getInitialState } from './reducers';

@NgModule({
  imports: [
    ...,

    IntentsRoutingModule,

    StoreModule.forFeature('intents', reducers, { initialState: getInitialState }), <-- Also this part seems to add 'intents' as a top-level property of state
    EffectsModule.forFeature([IntentsEffects]),
  ],
})
export class IntentsModule {}

/场景/模块/意图/还原器/index.ts：

import * as fromIntents from './intents.reducers';

export interface IntentsState {
  resources: fromIntents.State;
}

export interface State {
  intents: IntentsState;
}

export const reducers: ActionReducerMap<IntentsState> = {
  resources: fromIntents.reducer,
};

export function getInitialState(): IntentsState {
  return {
    resources: fromIntents.initialState,
  };
}

Answer 1

import和export在根structure 2中的IntentsModule AppModule中。
import在根ScenariosModule中IntentsModule之后的AppModule。

请勿在IntentsModules下嵌套各种ScenariosModules。相反，structure 2固有地需要创建分离并尽可能地使项目结构扁平化。

我发现，对于大多数情况，除Auth相关功能外，一种好方法是为每个功能创建两个模块，以将它们延迟加载在一起，但将状态管理与用户界面分离，但这些相应的模块应共享一个API具有相同的形状，即：

（{FrameworkLayoutModule和FrameworkStoreModule）和（AuthModule）。

随后，可根据需要由SecureModule或PublicModule延迟加载可重复使用的功能。

Answer 2

在两个模块中使用“意图”存储的问题。而且NgRx不能两次创建“意图”商店。

解决方案1 

从censings.module或如果不在其中使用的intents.module中删除“意图”。

解决方案2

将“意图”存储移动到StoreModule.forRoot或方案和意图父模块中。

如何使用@ ngrx / store和@ ngrx / entity嵌套延迟加载的功能模块的状态？

2 个答案: