Enklare statehantering med UseImmer i React

Att hantera State i React kan ibland vara en utmaning, särskilt när det gäller att förstå mutationer och rätt hantering av referenser. När du använder useState-setter måste du ofta skapa nya arrayer eller objekt för att se till att React upptäcker dina ändringar. Det kan snabbt bli förvirrande och kräva mycket kod. Ett alternativ är att använda useImmer, som låter dig ändra staten på ett mycket mer intuitivt sätt. I den här guiden kommer vi att gå igenom steg för steg hur du kan använda useImmer istället för useState.

Viktigaste insikter

• useImmer är ett alternativ till useState som underlättar hanteringen av muterbar State i React.
• Med useImmer kan du göra ändringar direkt i arrayer och objekt utan att behöva skapa nya referenser manuellt.
• Mutationer omvandlas automatiskt till nya, oföränderliga States, vilket förenklar hanteringen avsevärt.

Steg-för-steg-guide

Installation av useImmer

Först måste du se till att useImmer är installerat. Detta görs genom terminalkommandot:

npm install immer

När installationen är klar, bör du kontrollera att paketet visas korrekt i din package.json-fil. Du borde se immer alltid i listan över beroenden.

Användning av useImmer

Nu när useImmer är installerat kan du använda det i ditt projekt. Importera det enkelt i filen där du vill hantera staten:

import { useImmer } från 'use-immer';

Börja använda useImmer

Jämfört med useState förblir strukturen i din kod nästan densamma. Istället för useState använder du useImmer för att få tillgång till din nuvarande State och en funktion för att ändra staten.

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

I det här exemplet är initialVideos det startvärde för din stat. Nu kan du använda setVideos för att göra ändringar på din stat.

Mutationer med useImmer

Med useImmer har du flexibiliteten att direkt mutera staten. Det innebär att du kan använda metoder som push eller splice utan att behöva skapa en ny array eller ett nytt objekt manuellt. Här är ett exempel på hur du kan lägga till en ny video:

setVideos(draft => { draft.push(nyVideo); // nyVideo är objektet att lägga till
});

I det här fallet kommer draft vara en ändringsbar kopia av din stat. Alla ändringar du gör på den leder automatiskt till skapandet av en ny oföränderlig stat.

Ändra befintliga poster

Om du vill ändra en befintlig post är det också enkelt med hjälp av useImmer. Du behöver bara hitta posten i arrayen och göra de önskade ändringarna:

setVideos(draft => { const videoToEdit = draft.find(video => video.id === targetId); if (videoToEdit) { videoToEdit.title = nyTitle; // Ändra titeln videoToEdit.source = nyKälla; // Ändra källan }
});

Här kan du komma åt en specifik video i draft-arrayen och göra önskade ändringar. Dessa ändringar hanteras automatiskt som nya referenser.

Radera en post

Att ta bort en post blir också enklare. Du kan använda filter eller splice för att ta bort det önskade elementet. Här är ett exempel med splice:

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

Det tar bort videon med den motsvarande ID: en från utkastningsarrayen.

Integration i befintliga projekt

Att ersätta useState med useImmer kan avsevärt förenkla och göra din kod mer läsbar. Du behöver bara se till att du överallt där du har använt useState, kan introducera useImmer.

Det är viktigt att notera att användningen av useImmer inte påverkar prestandan negativt. Du bör dock alltid se till att din kod förblir tydlig och väl strukturerad.

Sammanfattning

I denna handledning har du lärt dig hur du kan använda useImmer i ditt React-projekt för att förenkla hanteringen av tillståndet. Du kan nu ha direkt åtkomst till mutationer, vilket gör utvecklingen effektivare och trevligare. Genom den automatiska omvandlingen till oföränderliga tillstånd behåller React kontrollen och ser till att alla ändringar upptäcks korrekt.