React+Redux像素艺术编辑器多调色板实现问题求助

先明确核心数据结构，这是解决所有问题的基础，用TypeScript接口定义如下：

// 单个颜色条目：用唯一标识区分同hex不同名称/调色板的颜色
interface ColorEntry {
  id: string; // UUID或自增ID，全局唯一
  hex: string; // #RRGGBB格式的颜色值
  name: string; // 用户自定义别名，比如"steel blue"
  paletteId: string; // 所属全局调色板的ID
}

// 全局用户调色板
interface UserPalette {
  id: string;
  name: string; // 调色板名称，比如"我的常用调色板"
  colorIds: string[]; // 存储ColorEntry的ID列表，维持颜色顺序
}

// 单个绘图数据
interface Drawing {
  id: string;
  name: string;
  pixels: string[][]; // 二维数组，每个元素是ColorEntry的ID（而非hex）
  defaultPalette: string[]; // 该绘图自动收集的ColorEntry ID列表
}

// 编辑器状态
interface EditorState {
  activeDrawingId: string | null; // 当前打开的绘图ID
  activePaletteId: string | null; // 当前激活的调色板ID（全局调色板或绘图默认调色板）
  currentColorId: string | null; // 当前选中的颜色ID
}

Redux Store的根状态可以按如下结构组织：

interface RootState {
  colorEntries: Record<string, ColorEntry>; // 所有颜色条目，key为ColorEntry.id
  userPalettes: Record<string, UserPalette>; // 所有全局调色板，key为UserPalette.id
  drawings: Record<string, Drawing>; // 所有绘图，key为Drawing.id
  editor: EditorState;
}

问题1：处理调色板切换 #

• 在EditorState中维护activePaletteId，切换调色板时只需dispatch一个action更新这个值即可：

  // Action Creator
  export const setActivePalette = (paletteId: string) => ({
    type: 'SET_ACTIVE_PALETTE',
    payload: paletteId
  });
  
  // Reducer片段
  function editorReducer(state: EditorState, action: any) {
    switch (action.type) {
      case 'SET_ACTIVE_PALETTE':
        return { ...state, activePaletteId: action.payload };
      // 其他case...
    }
  }
  

• ColorPalette组件只需从Store获取activePaletteId，然后根据ID找到对应的调色板数据（全局调色板从userPalettes取，绘图默认调色板从当前drawing.defaultPalette取，再映射为ColorEntry列表），统一渲染即可，无需区分不同的状态结构。

问题2：处理同一十六进制值但名称/所属调色板不同的颜色 #

• 核心是用ColorEntry.id作为颜色的唯一标识，而非hex值：
  • 绘图的pixels数组存储的是ColorEntry.id，而非hex字符串
  • 即使两个颜色的hex完全相同，只要id不同，就是两个独立的颜色条目
  • 渲染像素时，通过id从colorEntries中获取对应的hex和name，自然能区分同hex不同名称的颜色

问题3：用另一调色板中的颜色替换当前调色板的颜色 #

分两种场景：

替换当前绘图默认调色板的颜色 #

需要同时更新绘图的像素和默认调色板：

// Action Creator
export const replaceColorInDrawing = (drawingId: string, oldColorId: string, newColorId: string) => ({
  type: 'REPLACE_COLOR_IN_DRAWING',
  payload: { drawingId, oldColorId, newColorId }
});

// Reducer片段
function drawingsReducer(state: Record<string, Drawing>, action: any) {
  switch (action.type) {
    case 'REPLACE_COLOR_IN_DRAWING':
      const { drawingId, oldColorId, newColorId } = action.payload;
      const targetDrawing = state[drawingId];
      // 更新所有使用旧颜色的像素
      const updatedPixels = targetDrawing.pixels.map(row => 
        row.map(pixelId => pixelId === oldColorId ? newColorId : pixelId)
      );
      // 更新默认调色板：移除旧颜色ID，添加新颜色ID（去重）
      const updatedPalette = [...new Set(
        targetDrawing.defaultPalette.filter(id => id !== oldColorId).concat(newColorId)
      )];
      return {
        ...state,
        [drawingId]: { ...targetDrawing, pixels: updatedPixels, defaultPalette: updatedPalette }
      };
    // 其他case...
  }
}

替换全局调色板的颜色 #

直接修改对应的ColorEntry即可，所有引用该ID的绘图会自动同步渲染新的颜色：

// Action Creator
export const updateColorEntry = (colorId: string, newHex?: string, newName?: string) => ({
  type: 'UPDATE_COLOR_ENTRY',
  payload: { colorId, newHex, newName }
});

// Reducer片段
function colorEntriesReducer(state: Record<string, ColorEntry>, action: any) {
  switch (action.type) {
    case 'UPDATE_COLOR_ENTRY':
      const { colorId, newHex, newName } = action.payload;
      return {
        ...state,
        [colorId]: {
          ...state[colorId],
          ...(newHex && { hex: newHex }),
          ...(newName && { name: newName })
        }
      };
    // 其他case...
  }
}

问题4：替换已在数十个绘图中使用过的调色板颜色 #

分两种需求：

批量修改颜色的hex/名称 #

直接使用上面的updateColorEntry action修改对应的ColorEntry，所有使用该ID的绘图会自动渲染新的颜色，无需修改任何绘图的像素数据。

批量将某颜色替换为另一个颜色 #

写一个批量处理的action，遍历所有绘图完成替换：

// Action Creator
export const batchReplaceColor = (oldColorId: string, newColorId: string) => ({
  type: 'BATCH_REPLACE_COLOR',
  payload: { oldColorId, newColorId }
});

// Reducer片段
function drawingsReducer(state: Record<string, Drawing>, action: any) {
  switch (action.type) {
    case 'BATCH_REPLACE_COLOR':
      const { oldColorId, newColorId } = action.payload;
      return Object.entries(state).reduce((acc, [drawingId, drawing]) => {
        // 跳过未使用旧颜色的绘图
        if (!drawing.pixels.some(row => row.includes(oldColorId))) {
          acc[drawingId] = drawing;
          return acc;
        }
        // 更新像素
        const updatedPixels = drawing.pixels.map(row => 
          row.map(pixelId => pixelId === oldColorId ? newColorId : pixelId)
        );
        // 更新默认调色板
        const updatedPalette = [...new Set(
          drawing.defaultPalette.filter(id => id !== oldColorId).concat(newColorId)
        )];
        acc[drawingId] = { ...drawing, pixels: updatedPixels, defaultPalette: updatedPalette };
        return acc;
      }, {} as Record<string, Drawing>);
    // 其他case...
  }
}

组件简化思路 #

ColorPalette组件只需要接收paletteId和paletteType（可选，区分全局/绘图调色板），从Store中获取对应的颜色条目列表，渲染颜色块即可。所有交互（选择颜色、触发替换）都通过dispatch Redux action实现，组件无需关心状态的具体结构，只做UI展示和事件触发。

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