Update react redux nested json

Question

I am trying to update a deeply nested json property and I am not able to do so. I have tried several ways, anyone have any thoughts?

Way 1: doesn't work...

case ADD_REWARD:
  console.log("state", state);
  console.log("reward index", action.index);
  return {
    ...state,
    rewards: [
      {
        ...state.rewards[action.index],
        value: {
          ...state.rewards[action.index].value[0],

          target: [
            ...state.rewards[action.index].value[0].target,
            initialState.value_key_pair
          ]
        }
      }
    ]
  };

Way 2: works, except it adds index to object which isn't desired...

case ADD_REWARD:
  console.log("state", state);
  console.log("reward index", action.index);
  return {
    ...state,
    rewards: [
      {
        ...state.rewards,
        [action.index]: {
          ...state.rewards[action.index],
          value: {
            ...state.rewards[action.index].value,
            [0]: {
              ...state.rewards[action.index].value[0],
              target: [
                ...state.rewards[action.index].value[0].target,
                initialState.value_key_pair
              ]
            }
          }
        }
      }
    ]
  };

What I want this state to look like after immutably updating.

    rewards: [
      {
        type: "group",
        operand: "AND",
        value: [
          {
            type: "discount",
            subtype: "percent",
            value: 20,
            target: [
              {
                type: "abc",
                value: "123"
              },
              {
                type: "def",
                value: "456"
              }
            ]
          }
        ]
      }
    ]

why not using map and check the index, for specific index return the updated data otherwise same. Check [this answer](https://stackoverflow.com/a/49016090/5185595). — Mayank Shukla, Mar 21 '18 at 15:15

score 0 · Accepted Answer · answered Mar 22 '18 at 16:32

Here's what I came up with after a bit of discovery.

 return {
            ...state,
            rewards: state.rewards.map((group,index) => index === action.index ?
                // transform the one with a matching id
                { ...group, value: [...group.value.map((reward, index) => index === 0 ?{
                    ...reward,
                        target: [...reward.target, initialState.value_key_pair]
                } :reward
                )]
                } : group
            ),
        }

you don't need this: `[...group`, you can directly write: `value: group.value.map(.....)` — Mayank Shukla, Mar 22 '18 at 16:45

Update react redux nested json

1 Answers1