How to update nested object in redux

Question

I have an object:

{ //birthdaysObject
    '2000':{
        'January':
         [{
             name: 'Jerry'
         },
         {
             name: 'Chris'
         }]
    },
    '2001':{
        'February':
         [{
             name: 'John'
         }]
    }

When I go to update the redux store it is replacing the entire year (eg. '2000') object with the new one that I send to my reducer.

How can I push the the nested array of objects without replacing the entire year object?

My reducer currently looks like:

    return Object.assign({}, state, {
        ...state,
        birthdays: Object.assign({}, state.birthdays, {
            ...state.birthdays,
            ...birthdays
        })
    });

Where ...birthdays would be another object in the same format as the first code snippet.

I am also open to suggestions about the structure of my data, normalizing, etc.

Any help would be appreciated.

The object keys in the birthdaysObject are unknown and are assigned when iterating through a separate object. I've tried kolodny/immutability-helper however the $merge function is returning the same results as what my reducer is already doing.

Possible duplicate of [Updating nested data in redux store](https://stackoverflow.com/questions/32135779/updating-nested-data-in-redux-store) — imjared, May 23 '19 at 11:01
@imjared Thank you for pointing me to that thread. I will probably use that helper for my reducer functions from now on, however for this particular problem it is giving me the same results as the reducer I've written. — LegenJerry, May 23 '19 at 11:28

score 1 · Answer 1 · answered May 23 '19 at 11:41

I had the same problem some time ago. Follow the way I done it. You have an object, but I think you should have an array of objects. I also have different names on variables, but this should not be a problem to understand the logic

        //do a copy of the array first
        let newSubscriptions = state.customer.master.subscriptions.slice();
        
        //for the value you want to change, find it's position in the array first
        const indexInSubscriptions =  newSubscriptions.map(function(item) {
          return item.id;
        }).indexOf( action.id);
        
        //get the child you want to edit and keep it in a new variable
        const under_edit_subscription = state.customer.master.subscriptions[indexInSubscriptions];
        
        //go again over the array and where is the value at the index find above, replace the value
        newSubscriptions = newSubscriptions.map((item, i) => 
                    i === indexInSubscriptions ? under_edit_subscription : item
                   )

        //add the whole array into the state
        return {
          ...state,
          customer: {
            ...state.customer,
            master: {
            ...state.customer.master,
            subscriptions : newSubscriptions
            }
          }
        }

Thank you, I didn't necessarily go with your solution. However, I did create an array of objects instead, its a lot easier to work with. I ended up replacing the entire birthdays object with the new one. I would have preferred to be able to push one new item to the birthdays object but I think I should first look into normalizing that data structure before I do. I appreciate your help! — LegenJerry, May 24 '19 at 06:47

How to update nested object in redux

1 Answers1