如何以最扁平的方式为Redux标准化对象数组?

Bog*_*gin 1 reactjs redux normalizr

谨防!这个问题可能令人困惑并且无关紧要,因为我对错误原因的假设是错误的,问题出在减速器上,而不是我代表数据的方式。

因此,问题的正确答案是jpdelatorre的答案,而 Joao的答案是关于错误本身的。

假设我有来自服务器的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));
Run Code Online (Sandbox Code Playgroud)

但是我相信我做错了,因为它没有太大帮助。存储仍然太复杂,因此我需要在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"
      }
    ]
  }
]
Run Code Online (Sandbox Code Playgroud)

Joa*_*oao 5

根据此处的示例,您似乎正在尝试修改状态(因此,由于redux的比较浅而使您遇到麻烦的原因)。状态应视为不变的,而化简器中返回的所有内容都应该是全新的对象。Object.assign修改第一个参数。

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

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

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