如何以最平坦的方式为Redux规范化对象数组？

Posted 2023-01-05

谨防！这个问题可能令人困惑而且不相关，因为我对错误原因的假设是错误的，问题出在还原器上，而不是我代表数据的方式。

所以，问题的正确答案是jpdelatorre的问题，但是Joao是关于bug本身的。

假设我有来自服务器的JSON响应，这是一个嵌套对象数组。如何压扁它使商店处理尽可能容易？我试过使用像这样的normalizr工具：

const imageSchema = new Schema('image',  idAttribute: 'id' );
const tooltipSchema = new Schema('tooltips',  idAttribute: 'id' );
imageSchema.define(
    tooltips: arrayOf(tooltipSchema),
);
const initData = data.map(item => normalize(item, imageSchema));

但我相信我做错了因为它没有多大帮助。商店仍然太复杂，因此我需要在reducer中使用一些递归的东西来更新状态。

而且，一个深度嵌套的状态也很难与react-redux connect()一起工作，因为it does only a shallow comparison。

响应的形状如下：

[
  
    "id": 1,
    "title": "Partridge",
    "tooltips": [
      
        "id": 10,
        "x": 0.56,
        "y": 0.59,
        "content": "Jacky"
      ,
      
        "id": 11,
        "x": 0.08,
        "y": 0.8,
        "content": "Sarah"
      
    ]
  ,
  
    "id": 2,
    "title": "The Great Seal of South Australia",
    "tooltips": [
      
        "id": 20,
        "x": 0.77,
        "y": 0.74,
        "content": "A sheaf of wheat"
      ,
      
        "id": 21,
        "x": 0.16,
        "y": 0.2,
        "content": "A sheep"
      
    ]
  
]

答案

尝试使用normalizr

const imgSchema = new Schema('image',  idAttribute: 'id');
const tooltipSchema = new Schema('tooltip');
imgSchema.define(
   tooltips: arrayOf(tooltipSchema)
);

const normalizedData = normalize(data, arrayOf(imgSchema));
console.log(normalizedData);

这将给你一个输出

   entities: 
      image: 
         1: 
            id: 1,
            title: 'Partride',
            tooltips: [10, 11]
         ,
         2: 
            id: 2,
            title: 'The Great Seal...',
            tooltips: [20, 21]
         
      ,
      tooltips: 
          10: 
              id: 10,
              content: 'Jacky',
              x: 0.56,
              y: 0.59
          ,
          ...
      
   ,
   result: [1, 2]

然后，您可以将其保存到redux商店。

您的问题是如何以最平坦的方式为Redux标准化对象数组？我相信这是怎么做的。

另一答案

根据你的样本here，你似乎正试图修改状态（因此你因为redux的浅层比较而遇到麻烦）。国家应该被认为是不可改变的，你的减速器中返回的一切都应该是完全新的对象。 Object.assign修改了第一个参数。

尝试更换return Object.assign(state, data: newEntities )

与return Object.assign(, state, data: newEntities )

如果坚持这一点，则不需要平面数据结构。