Redux 为数组中的嵌套数据存储不可变模式？

Question

我有一个简单的 JSON 数据数组，看起来像这样（在我的 Redux 存储中也是一样，我将它存储在 properties 下）：

[
  {
    "id": "room",
    "name": "Room",
    "description": "Just a room",
    "foo": "bar",
  },
  {
    "id": "apartment",
    "name": "Apartment",
    "description": "just an apartment",
    "foo": "bar",
  }
]

它必须是一个数组，因为我正在映射它：

{properties.map(property => 
  <Property 
    id={property.id} 
    name={property.name} 
    description={property.description} 
    foo={property.foo}
 />)}

这样我的应用程序中呈现了两个属性。

问题是 - 我如何在 Redux 中更新 "foo"？

这是我目前的减速机written according to the docs:

case 'UPDATE_FOO':
  return {
    ...state, 
    properties: {
      ...state.properties,
      [action.id]: {
      ...state.properties[action.id],
      foo: action.fooData,
    }
  }
}

当然它会抛出TypeError: Cannot read property 'room' of undefined，因为我正在尝试访问state.properties["room"]，但它不存在。

我一直在考虑重塑我的 JSON 和 Redux 存储，但是一旦我将其更改为命名对象，我就无法对其进行映射...

谢谢！

Answer 1

将您的商店更改为对象，并在需要渲染时生成数组，方法是将其转换为数组，使用Object.values()：

{Object.values(properties).map(property => (
  <Property key={property.id} {...property} />
)}

如果订单可能发生变化（例如排序），您需要另一个带有 id 的数组来保存订单（请参阅redux normalized state）：

{
  properties: {
    room: {
      "id": "room",
      "name": "Room",
      "description": "Just a room",
      "foo": "bar",
    },
    apartment: {
      "id": "apartment",
      "name": "Apartment",
      "description": "just an apartment",
      "foo": "bar",
    }
  }
}

{
  properties: {
    room: {
      "id": "room",
      "name": "Room",
      "description": "Just a room",
      "foo": "bar",
    },
    apartment: {
      "id": "apartment",
      "name": "Apartment",
      "description": "just an apartment",
      "foo": "bar",
    }
  },
  order: ['apartment', 'room']
}
    
{order.map(id => (
  <Property key={id} {...properties[id]} />
)}

Answer 2

如果您想使用 ID 更新商店。您可以使用 id 在属性数组中查找一个元素（您正在尝试编辑），然后对其进行更新：

    case 'UPDATE_FOO':
        const newProperties = state.properties.map(property => {
            if(property.id === action.id) {
                return { ...property, foo: action.fooData}
            }
            return property;
        })
        return {
            ...state,
            properties: newProperties
        }
     }