Simpel State-Management med UseImmer i React

At arbejde med state i React kan nogle gange være en udfordring, især når det kommer til at forstå mutationer og korrekt håndtering af referencer. Når du bruger setteren til useState, skal du ofte oprette nye arrays eller objekter for at sikre, at React genkender dine ændringer. Dette kan hurtigt blive uoverskueligt og kræve meget kode. Et alternativ er useImmer, der giver dig mulighed for at ændre staten på en langt mere intuitiv måde. I denne vejledning vil vi trin for trin gennemgå processen med at bruge useImmer i stedet for useState.

Vigtigste erkendelser

• useImmer erstatning for useState, som gør det lettere at håndtere mutabel state i React.
• Med useImmer kan du foretage ændringer direkte på arrays og objekter, uden at skulle oprette nye referencer manuelt.
• Mutationer konverteres automatisk til nye, uforanderlige tilstande, hvilket markant letter håndteringen.

Trin-for-trin vejledning

Installation af useImmer

Først skal du sikre dig, at useImmer er installeret. Dette gøres via terminalkommandoen:

npm install immer

Når installationen er fuldført, skal du kontrollere, om pakken vises korrekt i din package.json-fil. Du bør altid se immer på listen over afhængigheder.

Brug af useImmer

Nu, hvor useImmer er installeret, kan du bruge det i dit projekt. Importer det simpelthen til den fil, hvor du vil administrere staten:

import { useImmer } from 'use-immer';

Getting started med brug af useImmer

I forhold til useState forbliver strukturen i din kode stort set den samme. I stedet for useState bruger du useImmer til at få din aktuelle state og en funktion til at ændre staten.

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

I dette eksempel er initialVideos startværdien for din state. Du kan nu bruge setVideos til at foretage ændringer på din state.

Mutationer med useImmer

Med useImmer har du fleksibiliteten til at mutere staten direkte. Dette betyder, at du kan bruge metoder som push eller splice uden at skulle oprette et nyt array eller objekt manuelt. Her er et eksempel på, hvordan du tilføjer en ny video:

setVideos(draft => { draft.push(newVideo); // newVideo er det objekt, der skal tilføjes
});

I dette tilfælde vil draft være et muterbart billede af din state. Alle ændringer, du foretager på det, vil automatisk føre til oprettelsen af en ny, uforanderlig state.

Ændringer i eksisterende poster

Hvis du vil ændre en eksisterende post, er det også let med useImmer. Du skal bare finde posten i arrayet og foretage de ønskede ændringer:

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

Her kan du få adgang til en specifik video i draft-arrayet og foretage de ønskede ændringer. Disse ændringer behandles automatisk som nye referencer.

Sletning af en post

Sletning af en post bliver også nemmere. Du kan bruge filter eller splice til at fjerne det ønskede 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 }
});

Fjerner videoet med den tilsvarende ID fra udkast-arrayet.

Integration i eksisterende projekter

Erstatning af useState med useImmer kan markant forenkle din kode og gøre den mere læsbar. Du skal blot sørge for at introducere useImmer, hvor du tidligere har brugt useState.

Det er vigtigt at bemærke, at brugen af useImmer ikke påvirker ydeevnen negativt. Du bør dog altid sikre dig, at din kode forbliver klar og velstruktureret.

Opsamling

I denne vejledning har du lært, hvordan du kan bruge useImmer i dit React-projekt for at forenkle håndteringen af tilstanden. Du kan nu få direkte adgang til mutationer, hvilket gør udviklingen mere effektiv og behagelig. Ved automatisk konvertering til uforanderlige tilstande bevarer React kontrol og sikrer, at alle ændringer bliver registreret korrekt.