CODEWITHSUNDEEP
reactjsreact-redux
me-me
me-me

Reputation: 5819

Updating nested redux state

I have a reducer that receives an action with a payload that I need to update the state with. The problem is the data I need to update in the state is nested data. I've added my reducer below with some comment and what i tried to do so far. 

export default function(state=data, action){
  switch (action.type) {
    case 'UPDATE_CONTACT_INFO':
      let appointment = state[action.appointmentIndex]; // This is the appointment that needs to be updated 
      appointment.notification.contactInfo = action.payload; // this is the data that needs to be updated with the payload. I tried updating it like this but then not sure how to add it to the state. 
      return state; // Somehow need to update the state with the new state
      break;
    default:
    return state;
  }
}

Below is my initial data structure which I pass into the reducer as the default state. 

 data = [
        {
        date: 'Friday, January 6',
        time: '4:00 PM-5:00 PM',
        notification:
          {
            contactInfo: [
              {
                displayMethod:"Phone Call",
                method:"Phone",
                value:"3473686552"
              },
              {
                displayMethod:"Email",
                method:"Email",
                value:"[email protected]"
              }
            ]
          }
      },
      {
        date: 'Saturday, January 7',
        time: '2:00 PM-6:00 PM',
        notification:
          {
            contactInfo: [
              {
                displayMethod:"Phone Call",
                method:"Phone",
                value:"2123686552"
              },
              {
                displayMethod:"Email",
                method:"Email",
                value:"[email protected]"
              }
            ]
          }
      }
    ];

The action.payload in the reducer data is the same structure as contactInfo array in one of the appointments. [Object, Object]

Upvotes: 0

Views: 1173

Answers (3)

thsorens
thsorens

Reputation: 1318

You need to use object.assign to change the data in your store

const newstateobject = Object.assign({}, state[someIndex], {notification: Object.assign({}, state[someindex].notification, {contactInfo: action.payload})});

return Object.assign({}, state, {[someindex]: newstateobject);

Upvotes: 0

Karol Selak
Karol Selak

Reputation: 4804

All problems of this type may be solved using react-addons-update package. Read here.

This case can be solved that way:

export default function(state=data, action){
  switch (action.type) {
    case 'UPDATE_CONTACT_INFO':
      return update(state, {[action.appointmentIndex]:{notification: {contactInfo: {$set: action.payload}}}});
    default:
    return state;
  }
}

Upvotes: 1

sethu
sethu

Reputation: 8431

With redux you never update the state. You will have to return a new state object, with the updated data.

In order to do that, you need to use either Object.assign() or the ES6 spread operator {...}

I have provided links to both: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator

Read up on the reducers here: http://redux.js.org/docs/basics/Reducers.html

Pay specific attention to We Dont Mutate the state point.

Upvotes: 3

Related Questions