ngrx StoreModule.forRoot 命名约定

Posted 2023-03-16

【中文标题】ngrx StoreModule.forRoot 命名约定

【英文标题】：ngrx StoreModule.forRoot Naming convention

【发布时间】：2021-12-29 14:25:25

【问题描述】：

所以在 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,
),

它有效。

一个状态中可以只有一个元素，还是我必须为不同的属性设置不同的减速器，或者我在这里遗漏了什么？

在化简器中，我想通过“page”及其所有子栏以及“more”...作为一个对象访问整个状态。

我该怎么做？我不明白为什么forRoot中的命名必须与appState中的属性相同，如果必须，我如何访问整个状态，以及我们如何处理嵌套对象？

我想我在这里遗漏了一些很简单的东西...... 提前致谢。

【参考方案1】：

通常，在根状态（在您的情况下为 AppState）内，您将为该状态内的每个属性都有一个 reducer。示例：

// 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
),

在特征存储中，范式略有变化。在那里，您将有一个用于整个功能状态的 reducer……而不是功能状态中的每个属性。