Ich lerne gerade mit redux reagieren und weiß, dass Unveränderlichkeit eine Schlüsselkomponente dieser Technologien ist, aber ich habe Mühe zu verstehen, wie es zu implementieren ist.React Redux immutability Spickzettel
Als solche fragte ich mich, ob es irgendwelche Spickzettel für die Reaktion/Redux Unveränderlichkeit da draußen gab?
Wenn nicht, was waren Ihre bevorzugten Methoden zur Implementierung von Immutability in Ihren Redox-Anwendungen?
Von Natur aus ist der Redux-Anwendungszustand bereits unveränderlich. Redux zerstört Ihren Anwendungsstatus und baut jedes Mal einen neuen auf, wenn Sie eine Aktion auslösen (wodurch ein Reduzierer ausgelöst wird, der den Status wiederherstellt). Es gibt also kein Cheatsheet, um Redux unwandelbar zu machen, weil es bereits funktioniert.
Sie könnten verwirrt werden, weil es Bibliotheken gibt, die sich mit unveränderlichen Strukturen befassen, wie Immutable.js, und es gibt Pakete für die Einbindung solcher in Redux wie redux-immutable. Wenn Sie Immutable.js verwenden, bedeutet dies, dass Ihre einzelnen Statuselemente als unveränderliche Strukturen gespeichert werden. Dies ist nicht notwendig, um Ihren Anwendungsstatus unveränderlich zu machen, da die grundlegende Natur Ihres Anwendungsstatus bereits mit oder ohne Bibliothek unveränderlich ist. Die Verwendung von Immutable.js mit Redux ist hauptsächlich nützlich für Dinge wie das schnelle Vergleichen von Requisiten, die vom Status übergeben wurden, um zu sehen, ob sie sich geändert haben, so dass Sie Neu-Renderings umgehen können.
fand ich diese Serie von Videos wirklich nützlich zu diesem Thema:
https://egghead.io/courses/getting-started-with-redux
Es ist kostenlos und innerhalb von dem React docs empfohlen. Es gibt spezielle, kurze Abschnitte, die beschreiben, wie Reduzierfunktionen geschrieben werden, die den vorhandenen Zustand nicht ändern. Sie diskutieren mit Object.assign(), ES6 ... Ausbreitung Betreiber usw.
Eine besondere Strategie, die ich nützlich gefunden testet deepFreeze auf den ursprünglichen Zustand mit, um sicherzustellen, dass Ihre Minderer Funktionen, die es nicht ändern.
Die Hauptsache, die mich gefangen ist, dass, während Sie das state Objekt aus dem Reduktions zurückzukehren, es gibt nichts in redux ist man einfach zu erzwingen den vorherigen Zustand mutiert, aus Versehen oder aus anderen Gründen.
Ich war eine Kopie des aktualisierten Zustand mit Object.assign({}, state, {key: 'new value'}) Rückkehr, aber wenn Ihr Zustand ist nicht flach, dh
state => {foo: {bar: {baz: 'some value'}}}
den verschachtelten Objekten wird kopiert statt verwiesen werden, da Object.assign()nicht eine tief kopieren, und es wird sehr einfach, den veralteten Zustand beizubehalten oder versehentlich verschachtelte Eigenschaften durch Überschreiben höherer Werte zu nupfen.
Immutable.js und andere Bibliotheken werden Ihnen mit Dienstprogrammen helfen, dieses Problem zu lösen. Oder Sie können einfach den Zustand flach halten, wie es die redux docs empfehlen. Sie können jede verschachtelte Eigenschaft einzeln kopieren, was jedoch dem Reducer eine Menge an Cruft hinzufügt.
DAS IST VON DESIGN! Um Dinge leistungsfähig zu halten, sollten Teile des Zustands, die sich nicht ändern, durch Verweis an den neuen Zustand übergeben werden, damit Sie nicht den gesamten Zustandsbaum neu aufbauen. Idealerweise macht der Reduzierer eine minimale Menge an neuem Zustand und nur den für die Aktion relevanten Teil. Dieses neue Stück Staat wird dann durch die Reduktionen "über" diesem in den gesamten Staatsbaum integriert. – Hovis
Ich habe gerade einen Blogbeitrag dazu geschrieben!Sie können es hier finden: http://www.curbitssoftware.com/2017/08/25/react-redux-immutable-update-cheat-sheet/
Eine Sache, die wirklich wichtig ist, wenn Sie mit Redux arbeiten, ist, dass Sie niemals Ihren Status mutieren (direkt ändern) sollten. Stattdessen sollten Sie immer eine Kopie des Zustands zurückgeben, den Sie ändern (ein häufiges Missverständnis ist, dass Sie alles kopieren/klonen müssen, lesen Sie mehr here und here. Dies bedeutet, dass Sie neue Möglichkeiten der Arbeit mit Arrays lernen müssen, ändern die Eigenschaft von Objekte und so weiter. um dies zu erleichtern wir unseren eigenen Spickzettel/Rezeptbuch für die häufigsten Fälle teilen wollte.
Viel Glück!
Es war die individuellen Stücke des Staates "Sie erwähnen, was ich war Ich sollte klarer sein, Entschuldigung! Ich denke, um meine eigene Frage zu beantworten Ich suchte nach dem folgenden ... Vermeiden Array-Mutationen mit c oncat(), slice() und ... verbreiten und vermeide Objektmutationen mit ... spread. Ich nehme an, ich sollte weitere Untersuchungen in jedem von diesen durchführen, da ich lieber so wenige externe Bibliotheken wie möglich verwenden würde. Würde aber gerne Meinungen dazu bekommen! –
@Thomas_Hoadley Ah, also beziehen Sie sich auf Methoden, die in Reducer-Funktionen verwendet werden, um den Status unveränderlich wiederherzustellen? Ihr Kommentar hat mehr oder weniger tatsächlich beantwortet (d. H. Concat(), slice(), ... spread). Ein weiterer Aspekt ist Object.assign(). Meine persönliche Vorliebe ist der Spread-Operator, da ich Babel benutze und ich finde es am saubersten und klarsten. Wie oben erwähnt, wird Immutable.js nicht wirklich für Redux benötigt, ich benutze es hauptsächlich b/c Ich habe große tief verschachtelte Objekte im Zustand & es ist viel schneller zu vergleichen, wenn sie unveränderbare Strukturen in 'shouldComponentUpdate()' sind. –
Okay, vielen Dank für die Hilfe! Ich werde versuchen, bei den grundlegenden Methoden zu bleiben und nur bei Bedarf auf immutable.js zurückzugreifen! Danke für Ihre Hilfe! –