Jednoduchý správca stavu s UseImmer v Reacte

Ovládanie State v Reacte môže byť občas náročné, najmä pokiaľ ide o pochopenie mutácií a správne zaobchádzanie s referenciami. Pri používaní settera useState je často potrebné vytvárať nové polia alebo objekty, aby React správne rozpoznal tvoje zmeny. To môže rýchlo spôsobiť neprehľadnosť a vyžadovať veľa kódu. Alternatívou je useImmer, ktorý ti umožňuje meniť stav oveľa intuitívnejšie. V tejto príručke prejdeme krok za krokom procesom, ako môžeš použiť useImmer namiesto useState.

Hlavné poznatky

• useImmer je náhrada za useState, ktorá uľahčuje manipuláciu s mutovateľným stavom v Reacte.
• S useImmer môžeš priamo meniť polia a objekty bez potreby ručne vytvárať nové referencie.
• Mutácie sa automaticky prevedú na nové, nemenné stavy, čo výrazne zjednodušuje manipuláciu.

Postup od kroku kroku

Inštalácia useImmer

Najprv sa musíš uistiť, že je nainštalovaný useImmer. To dosiahneš pomocou terminálového príkazu:

npm install immer

Po dokončení inštalácie skontroluj, či je balíček správne uvedený v tvojom package.json súbore. V zozname závislostí by si ho mal vždy vidieť.

Použitie useImmer

Teraz, keď je useImmer nainštalovaný, môžeš ho použiť vo svojom projekte. Jednoducho ho importuj do súboru, v ktorom chceš spravovať stav:

import { useImmer } from 'use-immer';

Začatie používania useImmer

Voči useState zostáva štruktúra tvojho kódu takmer rovnaká. Namiesto useState použi useImmer, aby si získal aktuálny stav a funkciu na zmenu stavu.

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

V tomto príklade je initialVideos počiatočnou hodnotou tvojho stavu. Teraz môžeš použiť setVideos na vytvorenie zmien vo svojom stave.

Mutácie s useImmer

S useImmer máš flexibilitu priamo mutovať stav. To znamená, že môžeš používať metódy ako push alebo splice bez potreby ručne vytvárať nové pole alebo objekt. Tu je príklad, ako môžeš pridať nové video:

setVideos(draft => { draft.push(novéVideo); // novéVideo je objekt, ktorý sa pridáva
});

V tomto prípade bude draft zmeniteľnou kópiou tvojho stavu. Všetky zmeny, ktoré v ňom urobíš, automaticky vedú k vytvoreniu nového, nemenného stavu.

Úpravy existujúcich položiek

Ak chceš upraviť existujúcu položku, s použitím useImmer je to rovnako jednoduché. Stačí nájsť položku v poli a vykonať požadované zmeny:

setVideos(draft => { const videoToEdit = draft.find(video => video.id === targetId); if (videoToEdit) { videoToEdit.title = novýNadpis; // Zmeň nadpis videoToEdit.source = novýZdroj; // Zmeň zdroj }
});

Tu môžeš pristupovať k špecifickému videu v pole draft a vykonať požadované zmeny. Tieto zmeny sa automaticky spracujú ako nové referencie.

Odstránenie položky

Odstránenie položky je rovnako jednoduché. Môžeš na to použiť filter alebo splice na odstránenie požadovanej položky. Tu je príklad s použitím splice:

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

Toto odstráni video s príslušným ID z draft-Array.

Integrácia do existujúcich projektov

Nahradenie useState pomocou useImmer môže výrazne zjednodušiť váš kód a spraviť ho čitateľnejším. Musíte sa len uistiť, že všade, kde ste použili useState, môžete zaviesť useImmer.

Je dôležité mať na pamäti, že použitie useImmer nemá negatívny vplyv na výkon. Stále však treba dbať na to, aby bol váš kód jasný a dobre štruktúrovaný.

Zhrnutie

V tomto návode ste sa naučili, ako môžete využiť useImmer vo vašom projekte v Reacte, aby ste zjednodušili manipuláciu so stavom. Teraz môžete mať priamy prístup k mutáciám, čo robí vývoj efektívnejším a príjemnejším. Automatická konverzia na nezmeniteľné stavy udržuje React pod kontrolou a zabezpečuje, že všetky zmeny sa správne vyhodnotia.