Как изменить вложенный объект, не изменяя его в Redux

Question

Я довольно новый парень для редукции. Я немного смущен тем, что как изменить эти данные, не изменяя его.

мой структура данных, как этот

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

      { 
      id:dc5c5d7c5s, 
      caption:null 


      }, 
      { 
      id:dccccccc5s, 
      caption:null 


      } 





     ], 
    } 

Whent эта функция пожаров

this.props.updateCaption (ID, заголовок)

мой редуктор следует установить данные в соответствии с идентификатором в данных структура без мутаций

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

Answer 1

если государственный объект ha на многих уровнях будет сложно изменить состояние без мутации. В этом сценарии я сначала полностью копирую государство, а затем вношу изменения в новое состояние и возвращая новое состояние. См. Здесь Cloning object deeply. Вы можете попробовать это один раз.

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