Reductoare mai bune cu Immer

În calitate de dezvoltator React, ar trebui să fiți deja familiarizați cu principiul conform căruia starea nu trebuie mutată direct. S-ar putea să vă întrebați ce înseamnă asta (cei mai mulți dintre noi au avut acea confuzie când am început).

Acest tutorial va face dreptate: veți înțelege ce este starea imuabilă și necesitatea acesteia. De asemenea, veți învăța cum să utilizați Immer pentru a lucra cu stare imuabilă și beneficiile utilizării acestuia. Puteți găsi codul în acest articol în acest depozit Github.

Imuabilitatea în JavaScript și de ce contează

Immer.js este o mică bibliotecă JavaScript a fost scrisă de Michel Weststrate a cărei misiune declarată este să vă permită „să lucrați cu o stare imuabilă într-un mod mai convenabil”.

Dar înainte de a ne scufunda în Immer, haideți să facem rapid o actualizare despre imuabilitatea în JavaScript și de ce este importantă într-o aplicație React.

Cel mai recent standard ECMAScript (alias JavaScript) definește nouă tipuri de date încorporate. Dintre aceste nouă tipuri, există șase care sunt denumite valori/tipuri primitive . Aceste șase primitive sunt undefined , number , string , boolean , bigint și symbol . O simplă verificare cu typeof operatorului JavaScript va dezvălui tipurile acestor tipuri de date.

 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

O primitive este o valoare care nu este un obiect și nu are metode. Cel mai important pentru discuția noastră actuală este faptul că valoarea unui primitiv nu poate fi schimbată odată ce este creat. Astfel, se spune că primitivele sunt immutable .

Celelalte trei tipuri sunt null , object și function . De asemenea, putem verifica tipurile lor folosind operatorul typeof .

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

Aceste tipuri sunt mutable . Aceasta înseamnă că valorile lor pot fi modificate în orice moment după ce au fost create.

S-ar putea să vă întrebați de ce am matricea [0, 1] acolo sus. Ei bine, în JavaScriptland, o matrice este pur și simplu un tip special de obiect. În cazul în care vă întrebați și despre null și cum este diferit de undefined . undefined înseamnă pur și simplu că nu am setat o valoare pentru o variabilă, în timp ce null este un caz special pentru obiecte. Dacă știți că ceva ar trebui să fie un obiect, dar obiectul nu este acolo, pur și simplu returnați null .

Pentru a ilustra cu un exemplu simplu, încercați să rulați codul de mai jos în consola browserului dvs.

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

String.prototype.match ar trebui să returneze o matrice, care este un tip de object . Când nu poate găsi un astfel de obiect, returnează null . Revenirea undefined nu ar avea sens nici aici.

Ajunge cu asta. Să revenim la discutarea imuabilității.

Conform documentelor MDN:

„Toate tipurile, cu excepția obiectelor, definesc valori imuabile (adică, valori care nu pot fi modificate).”

Această declarație include funcții deoarece sunt un tip special de obiect JavaScript. Vedeți definiția funcției aici.

Să aruncăm o privire rapidă la ce înseamnă în practică tipurile de date mutabile și imuabile. Încercați să rulați codul de mai jos în consola browserului dvs.

 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

Rezultatele noastre arată că, deși b este „derivat” din a , modificarea valorii lui b nu afectează valoarea lui a . Acest lucru rezultă din faptul că atunci când motorul JavaScript execută instrucțiunea b = a , creează o locație de memorie nouă, separată, pune 5 acolo și punctează b în acea locație.

Dar obiectele? Luați în considerare codul de mai jos.

 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"}

Putem vedea că schimbarea proprietății nume prin variabila d o schimbă și în c . Acest lucru rezultă din faptul că atunci când motorul JavaScript execută instrucțiunea, c = { name: 'some name ' } , motorul JavaScript creează un spațiu în memorie, pune obiectul înăuntru și indică c spre el. Apoi, când execută instrucțiunea d = c , motorul JavaScript indică doar d către aceeași locație. Nu creează o nouă locație de memorie. Astfel, orice modificare a elementelor din d este implicit o operație asupra elementelor din c . Fără mult efort, putem vedea de ce aceasta este o problemă în devenire.

Imaginați-vă că dezvoltați o aplicație React și undeva doriți să afișați numele utilizatorului ca some name citind din variabila c . Dar în altă parte ați introdus un bug în codul dvs. prin manipularea obiectului d . Astfel, numele utilizatorului va apărea ca new name . Dacă c și d ar fi primitive nu am avea această problemă. Dar primitivele sunt prea simple pentru tipurile de stare pe care trebuie să le mențină o aplicație tipică React.

Acesta este despre motivele majore pentru care este important să mențineți o stare imuabilă în aplicația dvs. Vă încurajez să verificați alte câteva considerente citind această scurtă secțiune din Immutable.js README: the case for imuability.

După ce am înțeles de ce avem nevoie de imuabilitate într-o aplicație React, haideți acum să aruncăm o privire la modul în care Immer abordează problema cu funcția de produce .

Funcția de produce a lui Immer

API-ul de bază al lui Immer este foarte mic, iar funcția principală cu care veți lucra este funcția produce . produce pur și simplu ia o stare inițială și un callback care definește modul în care starea ar trebui să fie mutată. Callback-ul în sine primește o copie nefinalizată (identică, dar totuși o copie) a stării în care face toate actualizările intenționate. În cele din urmă, produce o stare nouă, imuabilă, cu toate modificările aplicate.

Modelul general pentru acest tip de actualizare de stare este:

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

Să vedem cum funcționează acest lucru în practică.

 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) })

În codul de mai sus, pur și simplu trecem starea de pornire și un apel invers care specifică cum vrem să se întâmple mutațiile. E la fel de simplu. Nu trebuie să atingem nicio altă parte a statului. Lasă initState neatins și împărtășește structural acele părți ale statului pe care nu le-am atins între statele inițiale și cele noi. O astfel de parte din statul nostru este matricea de pets de companie. produce d nextState este un arbore de stări imuabil care are modificările pe care le-am făcut, precum și părțile pe care nu le-am modificat.

Înarmați cu aceste cunoștințe simple, dar utile, să aruncăm o privire la modul în care produce ne pot ajuta să simplificăm reductoarele React.

Scriere reductoare cu immer

Să presupunem că avem obiectul de stare definit mai jos

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

Și am vrut să adăugăm un nou obiect și, la un pas ulterior, să setăm cheia installed la true

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

Dacă ar fi să facem acest lucru în modul obișnuit cu sintaxa de răspândire a obiectelor și a matricei JavaScript, reductorul nostru de stare ar putea arăta ca mai jos.

 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; } };

Putem vedea că acest lucru este inutil de verbos și predispus la greșeli pentru acest obiect de stare relativ simplu. De asemenea, trebuie să atingem fiecare parte a statului, ceea ce este inutil. Să vedem cum putem simplifica acest lucru cu Immer.

 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);