Zustand关联关系状态管理咨询：REST API对接场景下的最优设计方案

方案1：半嵌套结构存储（适配单Campaign场景，省去格式转换成本） #

如果你当前仅需要管理单个激活的Campaign，不需要跨Campaign查询元素/配置，直接存储API返回的原生嵌套结构是性价比最高的方案，完全省去归一化和反序列化的重复工作。搭配Zustand的immer中间件可以大幅简化嵌套状态的更新逻辑：

import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'

const useCurrentCampaignStore = create(immer((set) => ({
  campaign: null,
  // 初始化直接传入API返回的原生数据，无需额外转换
  initCampaign: (rawData) => set({ campaign: rawData }),
  // 更新元素配置
  updateSetting: (elementId, settingId, newValue) => set((state) => {
    const targetElement = state.campaign.elements.find(el => el.id === elementId)
    const targetSetting = targetElement.settings.find(s => s.id === settingId)
    targetSetting.value = newValue
  }),
  // 更新元素内容
  updateElementContent: (elementId, newValue) => set((state) => {
    const targetElement = state.campaign.elements.find(el => el.id === elementId)
    targetElement.content = newValue
  })
})))

该方案的优势是提交请求时直接调用useCurrentCampaignStore.getState().campaign就能拿到符合接口要求的嵌套结构，无需二次组装，开发效率最高。只要页面元素量级没到上千级，性能完全满足使用需求。

方案2：归一化存储+封装通用转换工具（适合多实体关联复杂场景） #

如果后续需要支持多Campaign管理、跨Campaign复用元素/配置，归一化依然是最优的存储方案，格式转换繁琐的问题可以通过封装通用转换函数解决，一次编写全场景复用：

// 归一化工具：API嵌套数据转扁平存储结构
const normalizeCampaign = (rawCampaign) => {
  const elements = []
  const settings = []
  rawCampaign.elements.forEach(el => {
    elements.push({
      campaignId: rawCampaign.id,
      ...el,
      settings: undefined
    })
    el.settings.forEach(s => {
      settings.push({ elementId: el.id, ...s })
    })
  })
  return {
    campaign: { id: rawCampaign.id, name: rawCampaign.name },
    elements,
    settings
  }
}

// 反序列化工具：扁平结构转接口需要的嵌套结构
const denormalizeCampaign = (flatData) => {
  return {
    ...flatData.campaign,
    elements: flatData.elements.map(el => ({
      ...el,
      settings: flatData.settings.filter(s => s.elementId === el.id)
    }))
  }
}

使用时请求成功后直接调用normalizeCampaign(res.data)初始化store，提交请求前调用denormalizeCampaign(store.getState())即可拿到符合要求的嵌套结构，无需每次手动处理格式。

归一化方案优化建议 #

你当前的扁平结构用数组存储元素和配置，每次更新需要遍历数组查找对应项，性能和代码简洁度都可以优化：改成按ID做key的对象存储，查找和更新效率更高：

// 优化后的归一化结构示例
{
  campaign: { id: 1, name: "Welcome Campaign" },
  elementMap: {
    5: { id:5, campaignId:1, type:"heading", content:"Welcome!" },
    6: { id:6, campaignId:1, type:"button", content:"Submit" }
  },
  settingMap: {
    14: { id:14, elementId:5, name:"backgroundColor", value:"#ffffff00" },
    15: { id:15, elementId:5, name:"color", value:"#ffffff00" }
  }
}

// 对应的更新逻辑可以大幅简化
updateSetting: (settingId, newValue) => set((state) => {
  state.settingMap[settingId].value = newValue
})

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