CODEWITHSUNDEEP
reactjsredux
LegenJerry
LegenJerry

Reputation: 414

How to update nested object in redux

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.

Upvotes: 0

Views: 142

Answers (1)

nicolas florth
nicolas florth

Reputation: 11

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

Upvotes: 1

Related Questions