Enklere tilstandshåndtering med UseImmer i React

Behandlingen av State i React kan noen ganger være utfordrende, spesielt når det kommer til å forstå mutasjoner og riktig håndtering av referanser. Når du bruker setteren til useState, må du ofte opprette nye matriser eller objekter for å sikre at React gjenkjenner endringene dine. Dette kan raskt bli uoversiktlig og kreve mye kode. Et alternativ er å bruke useImmer, som lar deg endre tilstanden på en langt mer intuitiv måte. I denne veiledningen vil vi gå trinn for trinn gjennom prosessen med hvordan du kan bruke useImmer i stedet for useState.

Viktigste funn

• useImmer er et alternativ til useState som forenkler håndteringen av muterbar State i React.
• Med useImmer kan du gjøre endringer direkte på matriser og objekter uten å måtte opprette nye referanser manuelt.
• Mutasjoner konverteres automatisk til nye, uforanderlige tilstander, noe som gjør håndteringen betydelig enklere.

Trinn-for-trinn-veiledning

Installasjon av useImmer

Først må du sørge for at useImmer er installert. Dette gjøres ved hjelp av terminalkommandoen:

npm install immer

Når installasjonen er fullført, bør du sjekke om pakken vises riktig i package.json-filen din. Du bør alltid se den i listen over avhengigheter.

Bruk av useImmer

Nå som useImmer er installert, kan du bruke det i prosjektet ditt. Du importerer det enkelt inn i filen der du vil administrere tilstanden:

import { useImmer } from 'use-immer';

Intro til bruk av useImmer

I sammenligning med useState forblir strukturen i koden din nesten den samme. I stedet for useState bruker du useImmer for å få tilgang til din nåværende tilstand og en funksjon for å endre tilstanden.

const [videos, setVideos] = useImmer(initialVideos);

I dette eksempelet er initialVideos startverdien for tilstanden din. Nå kan du bruke setVideos til å gjøre endringer i tilstanden din.

Mutasjoner med useImmer

Med useImmer har du fleksibiliteten til å mutere tilstanden direkte. Dette betyr at du kan bruke metoder som push eller splice uten å måtte opprette nye matriser eller objekter manuelt. Her er et eksempel på hvordan du kan legge til en ny video:

setVideos(draft => { draft.push(newVideo); // newVideo er objektet som skal legges til
});

I dette tilfellet vil draft være et endringsbart bilde av tilstanden din. Alle endringer du gjør på det, fører automatisk til opprettelsen av en ny, uforanderlig tilstand.

Endringer av eksisterende oppføringer

Hvis du ønsker å endre en eksisterende oppføring, er det også enkelt med hjelp av useImmer. Du trenger bare å finne oppføringen i matrisen og gjøre ønskede endringer:

setVideos(draft => { const videoToEdit = draft.find(video => video.id === targetId); if (videoToEdit) { videoToEdit.title = newTitle; // Endre tittelen videoToEdit.source = newSource; // Endre kilden }
});

Her kan du få tilgang til en spesifikk video i draft-matrisen og gjøre ønskede endringer. Disse endringene behandles automatisk som nye referanser.

Slette en oppføring

Å slette en oppføring vil også være enklere. Du kan bruke filter eller splice for å fjerne ønsket element. Her er et eksempel med splice:

setVideos(draft => { const index = draft.findIndex(video => video.id === targetId); if (index!== -1) { draft.splice(index, 1); // Fjern video }
});

Det fjerner videoen med den tilsvarende ID fra utkastet.

Integrasjon i eksisterende prosjekter

Å erstatte useState med useImmer kan betydelig forenkle koden din og gjøre den mer lesbar. Du trenger bare å sørge for at du er i stand til å introdusere useImmer overalt hvor du har brukt useState.

Det er viktig å merke seg at bruken av useImmer ikke påvirker ytelsen negativt. Du bør imidlertid alltid sørge for at koden din forblir klar og godt strukturert.

Sammendrag

I denne veiledningen har du lært hvordan du kan bruke useImmer i ditt React-prosjekt for å forenkle håndteringen av tilstand. Du kan nå ha direkte tilgang til mutasjoner, noe som gjør utviklingen mer effektiv og behagelig. Ved automatisk konvertering til uforanderlige tilstander beholder React kontrollen og sørger for at alle endringer blir oppdaget på riktig måte.