ngrx StoreModule.forRoot 命名约定

Question

因此，在 app.module.ts 中的 Angular 应用程序中，我有以下内容：

StoreModule.forRoot({
  applicationState: applicationReducer,
}),

在我的 app.reducer.ts 文件中有这个：

export const initialState: AppState = {
  page: {
    items: [],
    data: {
      prop1: 0,
      prop2: 0,
      ...
    }
  },
  more: ""
}

export const moviesReducer = createReducer(
  initialState,
  on(...),
  on(...)
);

现在，如果我像上面那样做，我将无法正确访问我的 AppState 中的数据。 只有当我像这样更改 forRoot() 时：

StoreModule.forRoot({
  page: applicationReducer,
}),

有用。

State 可以只有一个元素，还是我必须为不同的属性使用不同的减速器，或者我在这里缺少什么？

在减速器中，我想使用“页面”访问整个 state，及其所有子栏以及“更多”......作为一个 Object。

我怎样才能做到这一点？ 我不明白为什么forRoot中的命名必须与appState中的属性相同，如果必须，我如何访问整个state，我们如何处理嵌套对象？

我想我在这里遗漏了一些很容易的东西......在此先感谢。

Answer 1

通常，在根 state（在您的情况下为 AppState）中，您将为该 state 中的每个属性提供一个减速器。 例子：

// Your root / main app state
export interface AppState {
  page: PageState,
  more: SomeOtherState
}

// State for a page.
export interface PageState {
  items: any[],
  // ...
}

// and so on...
export interface SomeOtherState {
  // ... other state properties
}

export const initialPageState: PageState = {
 items: [],
 // ... other initial values
};

export const initialOtherState: SomeOtherState {
  // ... initial key value pairs
}

export const initialAppState: AppState = {
  page: initialPageState,
  more: initialOtherState
};

// Reducer for page state
export const pageReducer = createReducer(
  initialPageState,

  on(...),
  on(...)
);

export const otherReducer = createReducer(
  initialOtherState,
  
  on(...),
  on(...)
);

然后，当您将其包含到您的应用程序模块中时，它将如下所示：

StoreModule.forRoot({
  page: pageReducer,
  more: otherReducer
}),

在功能商店中，范式略有变化。 在那里，您将拥有整个功能 state... 的减速器，而不是功能 state 中的每个属性。