How to change nested Object without mutating it in Redux

Question

I am pretty new guy to redux.I am little bit confused that how to change this data without mutating it.

my data structure like this

    {
      postOwnwerName:"",
        postTags:[],
        photos:[

          {  
            id:dc5c5d7c5s,
            caption:null


            },
             {  
            id:dccccccc5s,
            caption:null


            }





        ],
   }

Whent this function fires

this.props.updateCaption(id,caption)

my Reducer should set data according to the id in the data structure without mutating it

import * as types from '../Actions/actionTypes';

const initialState = {
    postOwnwerName:"",
    postTags:[],
    photos:[],
};

export default function uploadReducer(state=initialState,action) {
    switch (action.type){
        case types.SETPHOTOSTATE:
            return Object.assign({},state,{ photos:state.photos.concat(action.payload) });
        case types.SETCAPTIONTEXT:

     //this method is not working
            return (
                Object.assign({},state,state.photos.map((data) => {
                    if(data.id == action.payload.id){
                        return Object.assign({},data,{caption:action.payload.caption})
                    }else{
                        return data
                    }
                }))
            )
        default:
            return state
    }
}

duwalanise · Accepted Answer · 2016-12-06 09:12:24Z

7

if the state object has many level it will be difficult to change state without mutating. In those scenario I first copy the state deeply and then make changes to the new state and return new state. See here Cloning object deeply. You can try this once.

export default function uploadReducer(state=initialState,action) {
  let newState = JSON.parse(JSON.stringify(state));
  switch (action.type){
    case types.SETPHOTOSTATE:
       newState.photos.push(action.payload);
       return newState;
    case types.SETCAPTIONTEXT:
       newState.photos.map((data) => {
         if(data.id == action.payload.id){
           data.caption = action.payload.caption;
         }
       });
       return newState;
   default:
     return newState;
   }
}

answered Dec 6, 2016 at 9:12

duwalanise

1,3021 gold badge14 silver badges24 bronze badges

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

3 Comments

Nane Over a year ago

Thx bro Well I am asking a suggestion ,weather Object.assign is good or any library would be better

duwalanise Over a year ago

You can use spread operator as alternative of Object.assign if you are using es6. I haven't use any library that replaces Object.assign. sorry i have no idea about the library.

markerikson Over a year ago

You may also want to read the section on Immutable Update Patterns in the Redux docs.

Collectives™ on Stack Overflow

How to change nested Object without mutating it in Redux

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related