Come aggiornare un singolo valore all'interno di un elemento specifico dell'array in redux

Question

Ho un problema in cui il re-rendering dello stato causa problemi ui ed è stato suggerito di aggiornare solo il valore specifico all'interno del mio riduttore per ridurre la quantità di re-rendering su una pagina.

questo è esempio di mio stato

{ 
name: "some name", 
subtitle: "some subtitle", 
contents: [ 
    {title: "some title", text: "some text"}, 
    {title: "some other title", text: "some other text"} 
] 
} 

e sto aggiornando in questo modo

case 'SOME_ACTION': 
    return { ...state, contents: action.payload } 

dove action.payload è un intero array contenente nuovi valori. Ma ora ho in realtà solo bisogno di aggiornare il testo del secondo elemento contenuto dell'array, e qualcosa come questo non funziona

case 'SOME_ACTION': 
    return { ...state, contents[1].text: action.payload } 

dove action.payload è ora un testo che mi serve per l'aggiornamento.

Answer 1

è possibile utilizzare il React Immutability helpers

import update from 'react-addons-update'; 

// ...  

case 'SOME_ACTION': 
    return update(state, { 
    contents: { 
     1: { 
     text: {$set: action.payload} 
     } 
    } 
    }); 

Anche se posso immaginare che si sarebbe probabilmente fare qualcosa di più simile a questo?

case 'SOME_ACTION': 
    return update(state, { 
    contents: { 
     [action.id]: { 
     text: {$set: action.payload} 
     } 
    } 
    }); 

Answer 2

Non devi fare tutto in una sola riga:

case 'SOME_ACTION': 
    const newState = { ...state }; 
    newState.contents = 
    [ 
     newState.contents[0], 
     {title: newState.contnets[1].title, text: action.payload} 
    ]; 
    return newState 

Answer 3

È possibile utilizzare map. Ecco un esempio di implementazione:

case 'SOME_ACTION': 
    return { 
     ...state, 
     contents: state.contents.map(
      (content, i) => i === 1 ? {...content, text: action.payload} 
            : content 
     ) 
    }