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. — Mayank Shukla
– Mayank Shukla, Commented Mar 21, 2018 at 15:15

Brenton Pierce · Accepted Answer · 2018-03-22 16:32:28Z

0

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

answered Mar 22, 2018 at 16:32

Brenton Pierce

16310 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mayank Shukla Over a year ago

you don't need this: [...group, you can directly write: value: group.value.map(.....)

Collectives™ on Stack Overflow

Update react redux nested json

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related