React中使用Redux将同productCode的图片合并到对应产品数组的问题

• 单个产品可对应1张或多张图片，图片归属通过productCode字段判定
• productCode提取规则：取图片文件名第一个下划线后的内容，例如文件名AA_BB_CC.jpg对应的productCode为BB
• 需求：所有productCode相同的图片，都要合并到对应产品的图片数组中

原有Redux reducer逻辑仅对产品数组做简单拼接，无法实现同productCode的图片合并效果，原有代码如下：

return {
  ...state,
  products: [...state.products, ...action.payload]
};

修改reducer逻辑，先将现有产品按productCode建立映射，遍历新载荷时匹配已有产品合并图片，无匹配则新增条目，最终转回数组格式即可，实现代码如下：

const yourReducer = (state, action) => {
  // 建立productCode到产品的映射，提升查找效率
  const productMap = new Map(state.products.map(product => [product.productCode, product]));

  action.payload.forEach(newProduct => {
    const existed = productMap.get(newProduct.productCode);
    if (existed) {
      // 合并图片数组，使用Set去重避免重复插入同一张图片
      existed.images = [...new Set([...existed.images, ...newProduct.images])];
    } else {
      productMap.set(newProduct.productCode, {...newProduct});
    }
  });

  return {
    ...state,
    products: Array.from(productMap.values())
  };
};

如果你的action.payload传入的是原始图片列表，还没有提前按productCode分组，可以先增加分组逻辑，工具函数参考：

// 从文件名提取productCode
const getProductCode = (fileName) => fileName.split('_')[1] || '';

// 图片列表按productCode分组
const groupImagesByProduct = (imageList) => {
  const groups = {};
  imageList.forEach(img => {
    const code = getProductCode(img.fileName);
    if (!groups[code]) {
      groups[code] = { productCode: code, images: [] };
    }
    groups[code].images.push(img);
  });
  return Object.values(groups);
};

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