Come aggiornare il singolo valore all’interno di specifici elementi dell’array in redux

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

questo è un esempio del mio stato

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

e attualmente lo 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 solo bisogno di aggiornare il testo del secondo elemento nell’array dei contenuti, e qualcosa del genere non funziona

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

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

Potresti usare gli helper di React Immutability

 import update from 'react-addons-update'; // ... case 'SOME_ACTION': return update(state, { contents: { 1: { text: {$set: action.payload} } } }); 

Anche se immagino che probabilmente staresti facendo qualcosa di più simile a questo?

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

Puoi usare la map . Ecco un esempio di implementazione:

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

Non devi fare tutto in una riga:

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