Ich habe ein Problem, bei dem das erneute Rendern des Status Probleme mit der Benutzeroberfläche verursacht, und es wurde vorgeschlagen, nur einen bestimmten Wert in meinem Reduzierer zu aktualisieren, um das erneute Rendern auf einer Seite zu reduzieren.
Dies ist ein Beispiel für meinen Zustand
{
name: "some name",
subtitle: "some subtitle",
contents: [
{title: "some title", text: "some text"},
{title: "some other title", text: "some other text"}
]
}
und ich aktualisiere es gerade so
case 'SOME_ACTION':
return { ...state, contents: action.payload }
Wo action.payload
ist ein ganzes Array mit neuen Werten. Aber jetzt muss ich nur noch den Text des zweiten Elements im Inhaltsarray aktualisieren, und so etwas funktioniert nicht
case 'SOME_ACTION':
return { ...state, contents[1].text: action.payload }
Wo action.payload
ist jetzt ein Text, den ich zum Aktualisieren brauche.
javascript
reactjs
redux
Ilja
quelle
quelle
kolodny/immutability-helper
ist es jetztyarn add immutability-helper
undimport update from 'immutability-helper';
Sie können verwenden
map
. Hier ist eine Beispielimplementierung:quelle
Sie müssen nicht alles in einer Zeile erledigen:
quelle
Sehr spät zur Party, aber hier ist eine generische Lösung, die mit jedem Indexwert funktioniert.
Sie erstellen und verbreiten ein neues Array vom alten Array bis zu dem, das
index
Sie ändern möchten.Fügen Sie die gewünschten Daten hinzu.
Erstellen und verbreiten Sie ein neues Array von dem Array, das
index
Sie ändern möchten, bis zum Ende des ArraysAktualisieren:
Ich habe ein kleines Modul erstellt, um den Code zu vereinfachen. Sie müssen also nur eine Funktion aufrufen:
Weitere Beispiele finden Sie im Repository
Funktionssignatur:
quelle
Ich glaube, wenn Sie diese Art von Operationen für Ihren Redux-Status benötigen, ist der Spread-Operator Ihr Freund, und dieses Prinzip gilt für alle Kinder.
Stellen wir uns vor, dies sei Ihr Zustand:
Und Sie möchten Ravenclaw 3 Punkte hinzufügen
Mit dem Spread-Operator können Sie nur den neuen Status aktualisieren und alles andere intakt lassen.
Beispiel aus diesem erstaunlichen Artikel , finden Sie fast jede mögliche Option mit tollen Beispielen.
quelle
In meinem Fall habe ich so etwas gemacht, basierend auf Luis 'Antwort:
quelle
So habe ich es für eines meiner Projekte gemacht:
quelle