如何在Redux Reducer中正确移除嵌套对象状态中的指定车辆项？

API调用成功删除车辆后，无法在Redux reducer中从嵌套的favorites状态里移除对应车辆项。尝试过filter、map、some的多种组合，始终无法正确实现嵌套记录的删除。

数据结构 #

"favorites": [
    {
        "folderId": 1,
        "name": "SUV",
        "cars": [
            {
                "uid": 100,
                "carId": 5,
                "year": 2020,
                "make": "Ford",
                "model": "Explorer"
            },
            {
                "uid": 101,
                "carId": 63,
                "year": 2022,
                "make": "Toyota",
                "model": "RAV-4"
            },
            {
                "uid": 102,
                "carId": 165,
                "year": 2018,
                "make": "Honda",
                "model": "Pilot"
            }
        ]
    },
    {
        "folderId": 2,
        "name": "Trucks",
        "cars": [
            {
                "uid": 103,
                "carId": 75,
                "year": 2024,
                "make": "Ford",
                "model": "F-150"
            },
            {
                "uid": 104,
                "carId": 34,
                "year": 2019,
                "make": "Dodge",
                "model": "RAM"
            }
        ]
    }
]

当前错误的Reducer代码 #

const exampleReducer = (state = initialState, action: AnyAction) => {
    const { type, payload } = action;

    switch (type) {
        case types.DELETE_CAR_FROM_USER_FAVORITES_FOLDER_SUCCESS:
            return { ...state, favorites: state.favorites?.filter(folder => folder.cars.some(car=> car.uid !== payload)) };
    }
};

错误原因 #

当前代码用filter处理文件夹数组，逻辑是只要文件夹里存在任意一辆车的uid不等于payload，就保留整个文件夹——这完全偏离需求：我们需要保留所有文件夹，仅在对应文件夹内删除目标车辆，而非删除整个文件夹。

正确实现方案 #

基础版（保留空文件夹） #

const exampleReducer = (state = initialState, action: AnyAction) => {
  const { type, payload } = action;

  switch (type) {
    case types.DELETE_CAR_FROM_USER_FAVORITES_FOLDER_SUCCESS:
      return {
        ...state,
        favorites: state.favorites?.map(folder => ({
          // 拷贝原文件夹的所有属性，保证不可变性
          ...folder,
          // 过滤掉uid匹配payload的车辆
          cars: folder.cars.filter(car => car.uid !== payload)
        }))
      };
    // 必须保留default分支，返回原状态
    default:
      return state;
  }
};

进阶版（自动删除空文件夹） #

如果需要在文件夹的车辆被全部删除后，自动移除该空文件夹，可以在map之后追加一层filter：

const exampleReducer = (state = initialState, action: AnyAction) => {
  const { type, payload } = action;

  switch (type) {
    case types.DELETE_CAR_FROM_USER_FAVORITES_FOLDER_SUCCESS:
      return {
        ...state,
        favorites: state.favorites?.map(folder => ({
          ...folder,
          cars: folder.cars.filter(car => car.uid !== payload)
        }))
        // 过滤掉车辆为空的文件夹
        .filter(folder => folder.cars.length > 0)
      };
    default:
      return state;
  }
};

核心逻辑说明 #

1. 使用map遍历所有文件夹，确保每个文件夹都是新的引用（符合Redux不可变更新要求）
2. 对每个文件夹的cars数组使用filter，精准移除uid匹配payload的车辆
3. 进阶版额外过滤空文件夹，满足更复杂的业务需求

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