NgRx StoreModule.forRoot命名规则与AppState状态访问异常疑问

问题1：State是否只能包含单个元素？是否需要为不同属性配置不同reducer？ #

• 根State不是只能包含单个元素，它是可自定义结构的对象，支持两种状态管理方式：
  1. 拆分切片：给根State的每个一级属性分配独立的reducer，每个reducer只负责维护对应属性的状态，适合状态结构复杂、业务模块拆分清晰的场景
  2. 统一管理：用单个reducer维护整个根State（或根State的某一个大切片）的所有属性，适合状态关联度高、逻辑集中的场景，不需要强制拆分多个reducer
• 注意你现有代码存在笔误：app.reducer.ts中导出的reducer名为moviesReducer，但StoreModule.forRoot中引用的是applicationReducer，命名不一致也会导致状态异常。

问题2：希望在reducer中可以将包含page及其子属性、more字段的整个状态作为一个对象访问，该如何实现？ #

你只需要将包含page、more的整个状态作为一个切片配置即可，实现示例如下：

1. 首先确保你的reducer返回值为你定义的完整AppState结构：

// app.reducer.ts
export interface AppState {
  page: {
    items: any[],
    data: {
      prop1: number,
      prop2: number
    }
  },
  more: string
}

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

// 统一reducer命名为applicationReducer，和配置对应
export const applicationReducer = createReducer(
  initialState,
  // action处理逻辑中可直接访问、修改整个AppState的所有属性
  on(updateProp1, (state, { value }) => ({
    ...state,
    page: {
      ...state.page,
      data: {
        ...state.page.data,
        prop1: value
      }
    }
  })),
  on(updateMore, (state, { content }) => ({
    ...state,
    more: content
  }))
);

2. 在app.module.ts中配置根Store，将整个AppState作为一个切片：

StoreModule.forRoot({
  // 这里的key为根State的一级属性名，可自定义，比如命名为globalState
  globalState: applicationReducer
}),

3. 访问完整状态的方式：

// 在组件或服务中通过select获取完整的AppState
this.store.select(state => state.globalState).subscribe(globalState => {
  // 此处globalState就是包含page、more的完整对象
  console.log(globalState.page, globalState.more)
})

问题3：为什么forRoot中的配置命名必须和AppState内部的属性名一致？如果该规则是必须的，我要如何访问完整状态、如何处理嵌套对象？ #

• 该规则的本质是：StoreModule.forRoot接收的参数是根状态切片映射表，映射表的每个key都会成为根状态的一级属性，对应的reducer返回值就是这个一级属性的值，两者严格对应。你之前访问失败的原因是：
  1. 第一次配置的key是applicationState，此时实际根状态结构为{ applicationState: { page: {...}, more: "" } }
  2. 你预期的根状态是{ page: {...}, more: "" }，结构不匹配，直接访问state.page会返回undefined
  3. 后来你把key改成page，根状态变成{ page: { page: {...}, more: "" } }，此时你访问state.page拿到的其实是reducer返回的整个AppState对象，只是刚好你要取的属性也叫page，所以看起来能正常使用，但实际结构不符合预期，要取more字段需要写state.page.more才能拿到
• 访问完整状态和处理嵌套对象的方案：
  • 如果你要让根状态的结构和你定义的AppState完全一致（一级属性就是page和more），可以拆分两个reducer分别管理：

    StoreModule.forRoot({
      page: pageReducer, // pageReducer仅管理page属性的状态
      more: moreReducer // moreReducer仅管理more属性的状态
    })
    

    此时你可以直接通过state.page和state.more访问对应属性，也可以通过state拿到包含两个属性的完整根状态
  • 如果你用单切片管理嵌套对象，访问嵌套属性只需按状态结构层级取值即可，比如state.globalState.page.data.prop1，也可以使用createSelector创建记忆化选择器简化嵌套属性的访问。

内容的提问来源于stack exchange，提问作者DigitalJedi