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

Question

I've got a simple JSON data array that looks like this (it's the same in my Redux store and I store it under properties ):

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

It has to be an array because I'm mapping over it:

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

This way I have two properties rendered in my app.

The question is - how do I update "foo" in Redux?

This my reducer currently written according to the docs :

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

Of course it throws TypeError: Cannot read property 'room' of undefined because I'm trying to access state.properties["room"] and this does not exist.

I've been thinking about reshaping my JSON and Redux store, but once I change it to named objects I can't map over it...

Thank you!

Answer 1

Change your store to be an object, and generate the array, when you need to render it, by converting it to an array, using Object.values() :

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

If the order might change (sorting for example), you need to have another array with the ids to hold the order (see 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

If you want to update the store using but the Id. You can look up for the one element (you're trying to edit) in array of properties using the id, then to update it:

    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
        }
     }