reactjs - 在 Zusand 中处理关系数据

Question

我需要一些对 Zusstand 更有经验的人的意见，以分享他们管理关系状态的方式。目前我们有以下内容：

假设我们有示例实体s 和它们Campaign的s。返回它们的 REST API 采用以下格式：ElementsSetting

GET <API>/campaigns/1?incl=elements,elements.settings

{
   "id":1,
   "name":"Welcome Campaign",
   "elements":[
      {
         "id":5,
         "type":"heading",
         "label":"Heading",
         "content":"Welcome!",
         "settings":[
            {
               "id":14,
               "name":"backgroundColor",
               "value":"#ffffff00"
            },
            {
               "id":15,
               "name":"color",
               "value":"#ffffff00"
            }
         ]
      },
      {
         "id":6,
         "type":"button",
         "label":"Button",
         "content":"Submit",
         "settings":[
            {
               "id":16,
               "name":"backgroundColor",
               "value":"#ffffff00"
            },
            {
               "id":17,
               "name":"color",
               "value":"#ffffff00"
            },
            {
              "id":18,
              "name":"borderRadius",
              "value":"3px"
            }
            ...
         ]
      }
      ...
   ]
}

我们目前在 Reactjs 应用程序中所做的是获取这些数据，然后将其转换为以下规范化格式和set函数：

const useCurrentCampaignStore = create(
  combine(
    {
      campaign: {
        id: 1,
        name: "Welcome Campaign"
      },
      elements: [
        {
          id: 5,
          campaignId: 1,
          type: "heading",
          label: "Heading",
          content: "Welcome!"
        },
        {
          id: 6,
          campaignId: 1,
          type: "button",
          label: "Button",
          content: "Submit"
        }
      ],
      settings: [
        {
          id: 14,
          elementId: 5,
          name: "backgroundColor",
          value: "#ffffff00"
        },
        {
          id: 15,
          elementId: 5,
          name: "color",
          value: "#ffffff00"
        },
        {
          id: 16,
          elementId: 6,
          name: "backgroundColor",
          value: "#ffffff00"
        },
        {
          id: 17,
          elementId: 6,
          name: "disabled",
          value: false
        },
        {
          id: 18,
          elementId: 6,
          name: "borderRadius",
          value: 3,
        }
      ]
    },
    set => ({
      updateSetting: (id: string | number, newValue: string | number | boolean) =>
        set(state => {
          const settings = [...state.settings];

          return {
            ...state,
            settings: settings.map(setting => {
              if (setting.id == id) {
                return { ...setting, value: newValue };
              }

              return setting;
            })
          };
        }),
      updateElementContent: (id: string | number, newValue: string) => {
        set(state => {
          const elements = [...state.elements];

          return {
            ...state,
            elements: elements.map(element => {
              if (element.id == id) {
                return { ...element, content: newValue };
              }

              return element;
            })
          };
        });
      }
    })
  )
);

但是，我不确定这是最佳解决方案，因为将所有GET请求转换为规范化格式，然后在您想要构造 a或请求POST时将它们转换回嵌套对象是相当乏味的。PUTPATCH

那么，简而言之，你们如何在基于 Zusstand 的 RESTful-API 支持的 React 应用程序中设计状态？

标签： reactjsreact-reduxzustand