Bessere Reduzierer mit Immer

Als React-Entwickler sollten Sie bereits mit dem Prinzip vertraut sein, dass Zustände nicht direkt mutiert werden sollten. Sie fragen sich vielleicht, was das bedeutet (die meisten von uns hatten diese Verwirrung, als wir anfingen).

Dieses Tutorial wird dem gerecht: Sie werden verstehen, was unveränderlicher Zustand ist und die Notwendigkeit dafür. Sie erfahren auch, wie Sie Immer verwenden, um mit unveränderlichen Zuständen zu arbeiten, und die Vorteile seiner Verwendung. Sie finden den Code in diesem Artikel in diesem Github-Repo.

Unveränderlichkeit in JavaScript und warum es wichtig ist

Immer.js ist eine winzige JavaScript-Bibliothek, die von Michel Weststrate geschrieben wurde, dessen erklärte Mission es ist, Ihnen zu ermöglichen, „auf bequemere Weise mit unveränderlichen Zuständen zu arbeiten“.

Aber bevor wir in Immer eintauchen, lassen Sie uns kurz die Unveränderlichkeit in JavaScript auffrischen und warum sie in einer React-Anwendung wichtig ist.

Der neueste ECMAScript-Standard (alias JavaScript) definiert neun integrierte Datentypen. Von diesen neun Typen gibt es sechs, die als primitive Werte/Typen bezeichnet werden. Diese sechs Primitive sind undefined , number , string , boolean Wert , bigint und symbol . Eine einfache Prüfung mit dem typeof -Operator von JavaScript zeigt die Typen dieser Datentypen.

 console.log(typeof 5) // number console.log(typeof 'name') // string console.log(typeof (1 < 2)) // boolean console.log(typeof undefined) // undefined console.log(typeof Symbol('js')) // symbol console.log(typeof BigInt(900719925474)) // bigint

Ein primitive ist ein Wert, der kein Objekt ist und keine Methoden hat. Am wichtigsten für unsere gegenwärtige Diskussion ist die Tatsache, dass der Wert eines Grundelements nicht mehr geändert werden kann, sobald es erstellt wurde. Daher werden Primitive als immutable bezeichnet.

Die verbleibenden drei Typen sind null , object und function . Wir können ihre Typen auch mit dem typeof Operator überprüfen.

 console.log(typeof null) // object console.log(typeof [0, 1]) // object console.log(typeof {name: 'name'}) // object const f = () => ({}) console.log(typeof f) // function

Diese Typen sind mutable . Das bedeutet, dass ihre Werte nach ihrer Erstellung jederzeit geändert werden können.

Sie fragen sich vielleicht, warum ich das Array [0, 1] dort oben habe. Nun, in JavaScriptland ist ein Array einfach ein spezieller Objekttyp. Falls Sie sich auch über null wundern und wie es sich von undefined unterscheidet. undefined bedeutet einfach, dass wir keinen Wert für eine Variable festgelegt haben, während null ein Sonderfall für Objekte ist. Wenn Sie wissen, dass etwas ein Objekt sein sollte, aber das Objekt nicht vorhanden ist, geben Sie einfach null zurück.

Um dies anhand eines einfachen Beispiels zu veranschaulichen, versuchen Sie, den folgenden Code in Ihrer Browserkonsole auszuführen.

 console.log('aeiou'.match(/[x]/gi)) // null console.log('xyzabc'.match(/[x]/gi)) // [ 'x' ]

String.prototype.match sollte ein Array zurückgeben, das ein object ist. Wenn es ein solches Objekt nicht finden kann, gibt es null zurück. Auch hier würde die Rückgabe von undefined keinen Sinn machen.

Genug damit. Kehren wir zur Diskussion der Unveränderlichkeit zurück.

Laut den MDN-Dokumenten:

„Alle Typen außer Objekten definieren unveränderliche Werte (d. h. Werte, die nicht geändert werden können).“

Diese Anweisung schließt Funktionen ein, da es sich um einen speziellen Typ von JavaScript-Objekten handelt. Siehe Funktionsdefinition hier.

Werfen wir einen kurzen Blick darauf, was veränderliche und unveränderliche Datentypen in der Praxis bedeuten. Versuchen Sie, den folgenden Code in Ihrer Browserkonsole auszuführen.

 let a = 5; let b = a console.log(`a: ${a}; b: ${b}`) // a: 5; b: 5 b = 7 console.log(`a: ${a}; b: ${b}`) // a: 5; b: 7

Unsere Ergebnisse zeigen, dass, obwohl b von a „abgeleitet“ ist, a Änderung des Werts von b den Wert von a nicht beeinflusst. Dies ergibt sich aus der Tatsache, dass die JavaScript-Engine, wenn sie die Anweisung b = a ausführt, eine neue, separate Speicherstelle erstellt, dort 5 einfügt und b auf diese Stelle zeigt.

Was ist mit Objekten? Betrachten Sie den folgenden Code.

 let c = { name: 'some name'} let d = c; console.log(`c: ${JSON.stringify(c)}; d: ${JSON.stringify(d)}`) // {"name":"some name"}; d: {"name":"some name"} d.name = 'new name' console.log(`c: ${JSON.stringify(c)}; d: ${JSON.stringify(d)}`) // {"name":"new name"}; d: {"name":"new name"}

Wir können sehen, dass das Ändern der Namenseigenschaft über die Variable d sie auch in c ändert. Dies ergibt sich aus der Tatsache, dass, wenn die JavaScript-Engine die Anweisung c = { name: 'some name ' } , ausführt, die JavaScript-Engine einen Bereich im Speicher erstellt, das Objekt darin ablegt und c darauf zeigt. Wenn sie dann die Anweisung d = c ausführt, zeigt die JavaScript-Engine einfach d auf dieselbe Stelle. Es wird kein neuer Speicherort erstellt. Daher sind alle Änderungen an den Elementen in d implizit eine Operation an den Elementen in c . Ohne viel Aufwand können wir sehen, warum dies Probleme bereitet.

Stellen Sie sich vor, Sie entwickeln eine React-Anwendung und möchten irgendwo den Namen des Benutzers als some name anzeigen, indem Sie aus der Variablen c lesen. Aber an anderer Stelle hatten Sie einen Fehler in Ihren Code eingeführt, indem Sie das Objekt d manipulierten. Dies würde dazu führen, dass der Name des Benutzers als new name angezeigt wird. Wenn c und d Primitive wären, hätten wir dieses Problem nicht. Aber Primitive sind zu einfach für die Arten von Zuständen, die eine typische React-Anwendung aufrechterhalten muss.

Dies ist ungefähr der Hauptgrund, warum es wichtig ist, einen unveränderlichen Zustand in Ihrer Anwendung beizubehalten. Ich ermutige Sie, einige andere Überlegungen zu prüfen, indem Sie diesen kurzen Abschnitt aus der README-Datei von Immutable.js lesen: Argumente für die Unveränderlichkeit.

Nachdem wir verstanden haben, warum wir Unveränderlichkeit in einer React-Anwendung benötigen, werfen wir nun einen Blick darauf, wie Immer das Problem mit seiner produce -Funktion angeht.

produce Produktfunktion

Die Kern-API von Immer ist sehr klein, und die Hauptfunktion, mit der Sie arbeiten werden, ist die produce -Funktion. produce nimmt einfach einen Anfangszustand und einen Rückruf, der definiert, wie der Zustand geändert werden soll. Der Rückruf selbst erhält eine Entwurfskopie (identisch, aber immer noch eine Kopie) des Zustands, in dem er alle beabsichtigten Aktualisierungen vornimmt. Schließlich wird ein neuer, unveränderlicher Zustand mit allen angewendeten Änderungen produce .

Das allgemeine Muster für diese Art von Zustandsaktualisierung ist:

 // produce signature produce(state, callback) => nextState

Mal sehen, wie das in der Praxis funktioniert.

 import produce from 'immer' const initState = { pets: ['dog', 'cat'], packages: [ { name: 'react', installed: true }, { name: 'redux', installed: true }, ], } // to add a new package const newPackage = { name: 'immer', installed: false } const nextState = produce(initState, draft => { draft.packages.push(newPackage) })

Im obigen Code übergeben wir einfach den Startzustand und einen Rückruf, der angibt, wie die Mutationen geschehen sollen. So einfach ist das. Wir müssen keinen anderen Teil des Staates berühren. Es lässt initState unberührt und teilt strukturell die Teile des Zustands, die wir nicht berührt haben, zwischen den Ausgangs- und den neuen Zuständen. Ein solcher Teil in unserem Staat ist das pets -Array. Der „ produce d nextState ist ein unveränderlicher Zustandsbaum, der sowohl die Änderungen enthält, die wir vorgenommen haben, als auch die Teile, die wir nicht geändert haben.

Bewaffnet mit diesem einfachen, aber nützlichen Wissen, werfen wir einen Blick darauf, wie produce uns helfen können, unsere React-Reduzierer zu vereinfachen.

Reduzierer mit Immer schreiben

Angenommen, wir haben das unten definierte Zustandsobjekt

 const initState = { pets: ['dog', 'cat'], packages: [ { name: 'react', installed: true }, { name: 'redux', installed: true }, ], };

Und wir wollten ein neues Objekt hinzufügen und in einem nachfolgenden Schritt seinen installed Schlüssel auf true setzen

 const newPackage = { name: 'immer', installed: false };

Wenn wir dies auf die übliche Weise mit JavaScripts Objekt- und Array-Spread-Syntax tun würden, könnte unser Zustandsreduzierer wie unten aussehen.

 const updateReducer = (state = initState, action) => { switch (action.type) { case 'ADD_PACKAGE': return { ...state, packages: [...state.packages, action.package], }; case 'UPDATE_INSTALLED': return { ...state, packages: state.packages.map(pack => pack.name === action.name ? { ...pack, installed: action.installed } : pack ), }; default: return state; } };

Wir können sehen, dass dies für dieses relativ einfache Zustandsobjekt unnötig ausführlich und fehleranfällig ist. Wir müssen auch jeden Teil des Staates berühren, was unnötig ist. Mal sehen, wie wir dies mit Immer vereinfachen können.

 const updateReducerWithProduce = (state = initState, action) => produce(state, draft => { switch (action.type) { case 'ADD_PACKAGE': draft.packages.push(action.package); break; case 'UPDATE_INSTALLED': { const package = draft.packages.filter(p => p.name === action.name)[0]; if (package) package.installed = action.installed; break; } default: break; } });

 //curried produce signature produce(callback) => (state) => nextState

 const curriedProduce = produce((draft, action) => { switch (action.type) { case 'ADD_PACKAGE': draft.packages.push(action.package); break; case 'SET_INSTALLED': { const package = draft.packages.filter(p => p.name === action.name)[0]; if (package) package.installed = action.installed; break; } default: break; } });

 // add a new package to the starting state const nextState = curriedProduce(initState, { type: 'ADD_PACKAGE', package: newPackage, }); // update an item in the recently produced state const nextState2 = curriedProduce(nextState, { type: 'SET_INSTALLED', name: 'immer', installed: true, });

 yarn add immer use-immer

 import React from "react"; import { useImmer } from "use-immer"; const initState = {} const [ data, updateData ] = useImmer(initState)

 // make changes to data updateData(draft => { // modify the draft as much as you want. })

 import React from "react"; import { useImmerReducer } from "use-immer"; const initState = {} const reducer = (draft, action) => { switch(action.type) { default: break; } } const [data, dataDispatch] = useImmerReducer(reducer, initState);