Updating an object within array in react redux reducer getting map() is not a function

Question

I have a fairly complex/nested redux store like this:

{
  object1
  {
    array:
    [
      object[1]: {
        id: 1,
        replace: ""
      }
      object[2]: {
        id: 2
        replace: ""
      }
      object[3]: {
        id: 3,
        replace: ""
      }
    ]
  }
}

After dispatching an action, I need to insert the action to one of the object[] based on ID. I am currently using the following scripts to update replace within the reducer. However this will change the array to an object due to the curly bracket of object2: {}.

case UPDATE:
  return {
    ...state,
    object1: {
      ...state.object1,
      array: {
        ...state.object1.array,
        [action.id]: {
          ...state.object1.array[action.id],
          replace: action.result
        }
      }
    }
  };

My render will breaks after that since object2.map is no longer a function after changing to object. How do I workaround this without converting it to an object?

The following will failed with syntax error:

case UPDATE:
  return {
    ...state,
    object1: {
      ...state.object1,
      array: [
        ...state.object1.array,
        [action.id]: {
          ...state.object1.array[action.id],
          replace: action.result
        }
      ]
    }
  };

What is Array[1], Array[2], Array[3] – Shubham Khatri Aug 03 '17 at 17:13 — Shubham Khatri, Aug 03 '17 at 17:13
Or do you mean to say 3 objects within object2 – Shubham Khatri Aug 03 '17 at 17:16 — Shubham Khatri, Aug 03 '17 at 17:16
@ShubhamKhatri Yup, my mistake. Changed the question above – Yen Sheng Aug 03 '17 at 17:25 — Yen Sheng, Aug 03 '17 at 17:25

Shubham Khatri · Accepted Answer · 2017-11-14T10:46:45.537

1

You cannot directly specify the index that you want to modify with spread syntax, you need to first find the index and do it like

case UPDATE:
  var idx = state.object1.object2.findIndex(obj => obj.id === action.id)
  return {
    ...state,
    object1: {
      ...state.object1,
      object2: [
        ...state.object1.object2.slice(0, idx),
        {
            ...state.object1.object2[idx],
            replace: action.result 
        }
        ...state.object1.object2.slice(idx + 1)
      ]
    }
  };

Or else you can make use of immutability-helper package. See this answer for a sample of how to do it

how to use Immutability helper to update a nested object within an array?

edited Nov 14 '17 at 10:46

answered Aug 03 '17 at 17:20

Shubham Khatri

270,417
55
406
400

Check this answer – Shubham Khatri Aug 03 '17 at 17:40
Thanks! Used immutability-helper instead as it offer better performance. Updated below for the codes. – Yen Sheng Aug 04 '17 at 06:08
No Problem. However it is already there as an answer to the question I have added in my answer – Shubham Khatri Aug 04 '17 at 06:22

Emrys Myrooin · Answer 2 · 2017-08-10T10:15:27.990

1

'You can check the library immutadot. Its purpose is to help update complex nested data structure in a very concise way and was created with redux usage in mind.

In your case you can write it this way :

import { set } from 'immutadot'

...

  case UPDATE:
    return set(state, 'object1.arrary[' + id + '].replace', action.result)
    // or with templated string
    return set(state, `object1.arrary[${ id }].replace`, action.result)

...

It relies on lodash under the wood so you can use all faculties of lodash's functions.

edited Aug 10 '17 at 10:15

answered Aug 04 '17 at 09:16

Emrys Myrooin

2,179
14
39

1

This looks neat! – Yen Sheng Aug 05 '17 at 08:02
It is :-) The only drawback is when you try to use it with a type system like flow or typescript. You instantly lose type... – Emrys Myrooin Aug 06 '17 at 09:09

score 0 · Answer 3 · answered Aug 04 '17 at 06:06

0

Following code for using immutability-helper package.

case UPDATE:
  return update(state, {
    object1: {
      array: {
        [action.id]: {
          replace: {
            $set: action.result
          },
        },
      },
    }
  });

answered Aug 04 '17 at 06:06

Yen Sheng

695
1
12
28

Updating an object within array in react redux reducer getting map() is not a function

3 Answers3

Linked