Übersetzung von der Homepage von Immer :
https://immerjs.github.io/immer/
Immer ist ein Paket, mit dem Sie bequemer mit dem unveränderlichen Zustand arbeiten können.
Immer vereinfacht den Umgang mit unveränderlichen Datenstrukturen
Immer kann in jedem Kontext verwendet werden, in dem unveränderliche Datenstrukturen benötigt werden. Zum Beispiel in Kombination mit React's State, React oder Redux's Reducer oder Configuration Management.
Unveränderliche Datenstruktur zur Änderungserkennung:
Wenn sich die Referenz auf ein Objekt nicht ändert, ändert sich das Objekt selbst nicht. Außerdem macht Immer das Kopieren relativ billig (es erfordert nicht viel Aufwand):Unveränderliche Teile des Datenbaums müssen nicht kopiert und im Speicher mit älteren Versionen des gleichen Zustands geteilt werden.
Im Allgemeinen können diese Vorteile erreicht werden, indem sichergestellt wird, dass Sie niemals Eigenschaften eines Objekts, Arrays (Array) oder einer Map ändern, indem Sie immer eine modifizierte Kopie erstellen. (Ich meine die Verwendung von Funktionen wie map(), filter() ... um eine Kopie zu erstellen, die die Originaldaten nicht direkt ändert). In der Praxis kann dies zu ziemlich umständlichem Code führen, und es ist sehr einfach, diese Einschränkungen versehentlich zu verletzen. Immer hilft Ihnen dabei, dem unveränderlichen Datenmodell zu folgen, indem es die folgenden Probleme löst:
- Immer erkennt Mutationen und wirft Fehler.
Siehe die Definition von Mutation:Mutation
- Immer eliminiert die Notwendigkeit für Boilerplate-Code, der beim Erstellen umfassender Updates für unveränderliche Objekte erforderlich ist:Ohne Immer müssen Objektkopien auf jeder Ebene von Hand erstellt werden . Typischerweise wird viel Spread-Operator '...' verwendet. Bei der Verwendung von Immer werden Änderungen am Entwurfsobjekt vorgenommen, das die Änderungen aufzeichnet und die Erstellung der erforderlichen Kopien übernimmt, ohne jemals das ursprüngliche Objekt zu beeinträchtigen.
Dieser Absatz besagt, dass wir ohne Immer eine Kopie der Originaldaten erstellen müssen. Verwenden Sie die folgenden Stile, um eine Kopie der Originaldaten zu erstellen:
- filtern, zuordnen
- Object.assign({}, ...)
- Benutzer:{ ...prevState.user, Alter:prevState.user.age + 1 }
Link verweisen
- Wenn Sie Immer verwenden, müssen Sie keine speziellen APIs oder Datenstrukturen lernen, um unveränderliche Zustände zu erstellen. Mit Immer verwenden Sie JavaScript-Datenstrukturen und veränderbare JavaScript-APIs.
Ein kurzes Vergleichsbeispiel
const baseState = [
{
title: "Learn TypeScript",
done: true
},
{
title: "Try Immer",
done: false
}
]
Stellen Sie sich vor, wir haben den Basisstatus oben und wir müssen das 2. Element aktualisieren und das 3. hinzufügen. Wir möchten jedoch den ursprünglichen Basisstatus nicht ändern und wir möchten auch ein tiefes Kopieren vermeiden (um das gesamte 1. Element beizubehalten).
Verwenden Sie Immer nicht
Ohne Immer müssten wir jede Ebene der Zustandsstruktur, die von unseren Änderungen betroffen ist (die Aktualisierungen und Ergänzungen sind), sorgfältig duplizieren:
const nextState = baseState.slice() // sao chép mảng
nextState[1] = {
// thay đổi phần tử thứ 1 ...
...nextState[1], // sao chép phần tử thứ 1
done: true // ...kết hợp với việc cập nhật
}
// ngay khi nextState được sao chép, có thể sử dụng push ở đây,
// nhưng làm điều tương tự vào bất kỳ thời điểm tùy ý nào trong
// tương lai sẽ vi phạm các nguyên tắc bất biến và tạo ra lỗi!
nextState.push({title: "Tweet about it"})
Verwenden Sie Immer
Mit Immer ist der Prozess einfacher. Wir können uns die Leistungsfähigkeit der Produce-Funktion zunutze machen, die das erste Argument als state nimmt mit der wir beginnen wollen, und als zweites Argument übergeben wir eine Funktion , genannt Formel (Rezept), in einem Entwurf übergeben, auf den wir Mutationen anwenden können. Mutationen werden aufgezeichnet und verwendet, um den nächsten Zustand nach Rezept zu erzeugen (Rezept) ist fertig. Die Produce-Funktion übernimmt alle erforderlichen Kopiervorgänge und schützt vor zukünftigen versehentlichen Änderungen und durch Einfrieren der Daten.
import produce from "immer"
const nextState = produce(baseState, draft => {
draft[1].done = true
draft.push({title: "Tweet about it"})
})
So funktioniert Immer
Die Grundidee ist, dass Sie mit Immer alle Ihre Änderungen auf einen temporären Entwurf anwenden, der ein Proxy von currentState ist. Sobald alle Ihre Mutationen abgeschlossen sind, generiert Immer den nächsten Zustand basierend auf den Mutationen für den Entwurfszustand. Das bedeutet, dass Sie mit Ihren Daten interagieren können, indem Sie sie einfach ändern, während alle Vorteile unveränderlicher Daten erhalten bleiben.
