NgRx中如何编写selector遍历嵌套数组获取items数组

问题背景 #

需要从如下多层嵌套的JSON结构中提取items数组，目前已编写的选择器仅能获取list下的nestedService层级数据，无法继续向下拿到目标items。
给定数据结构：

const list  = {
  "nestedService": [
    {
      "categories": [
        {
          "name": "test1",
          "items": [
            {
              "itemCat": [
                {
                  "code": "123"
                }
              ]
            }
          ]
        },
        {
          "name": "test2",
          "items": [
            {
              "itemCat": [
                {
                  "code": "345"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

现有未完成的选择器代码：

export const getItems =
createSelector(selectState,(state) =>  {
  const data = state.list
  return data?.map(e => e.nestedService);
});

正确实现方式 #

现有代码的问题是仅完成了第一层数组映射，没有继续向下拆解嵌套的数组结构，且普通map处理多层数组会返回嵌套数组，需要用flatMap打平层级，同时做空值兜底避免运行时报错。
推荐按层级拆分小选择器，方便后续维护和复用：

// 基础选择器：获取根级list
export const selectList = createSelector(
  selectState,
  (state) => state.list
);

// 提取nestedService层级，打平为一维数组
export const selectNestedServices = createSelector(
  selectList,
  (list) => list?.flatMap(listItem => listItem.nestedService) ?? []
);

// 提取所有categories层级，打平为一维数组
export const selectAllCategories = createSelector(
  selectNestedServices,
  (services) => services.flatMap(service => service.categories) ?? []
);

// 最终选择器：获取所有分类下的items合集，返回一维数组
export const getItems = createSelector(
  selectAllCategories,
  (categories) => categories.flatMap(category => category.items) ?? []
);

关键说明 #

• 所有数组层级遍历优先用flatMap替代普通map：普通map处理子数组时会返回[[子元素1], [子元素2]]的嵌套结构，flatMap会自动将内层数组展开，最终返回平铺的一维数组
• 每一层加?? []空值兜底：当某一层数据为null或undefined时，直接返回空数组，避免调用数组方法抛出异常
• 如果需要按条件筛选指定分类下的items，直接在对应层级加过滤逻辑即可，比如仅获取name为test1的分类下的items：

export const getTest1CategoryItems = createSelector(
  selectAllCategories,
  (categories) => categories
    .filter(category => category.name === 'test1')
    .flatMap(category => category.items) ?? []
);

• 如果业务需要保留原有层级结构（比如要同时拿到分类名和对应items），把flatMap换回普通map即可，根据实际返回结构需求调整。

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