1

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

所以，这个问题的正确答案是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()非常困难，因为它只进行了浅层比较。

响应的形状如下：

[
  {
    "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"
      }
    ]
  }
]
4

2 回答 2

5

根据您在此处的示例，您似乎正在尝试修改状态（因此，由于 redux 的浅比较，您遇到了麻烦）。状态应该被认为是不可变的，在你的 reducer 中返回的所有东西都应该是全新的对象。Object.assign修改第一个参数。

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

和return Object.assign({}, state, { data: newEntities })

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

于 2016-11-22T20:39:42.627 回答
4

用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 规范化对象数组？. 我相信这是如何做到的。

于 2016-11-22T21:37:35.920 回答