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 中的每個屬性。