Egyszerű állapotkezelés a UseImmer használatával Reactben

A State-kezelése React-ben néha kihívást jelenthet, különösen akkor, ha a mutációk és a referenciák kezelése a fontos. Amikor a useState setterét használod, gyakran új tömböket vagy objektumokat kell létrehoznod azért, hogy a React felismerje a változtatásokat. Ez gyorsan áttekinthetetlenné és sok kódot igénylővé válhat. Egy alternatíva a useImmer, amely lehetővé teszi az állapot sokkal intuitívabb módon történő módosítását. Ebben az útmutatóban lépésről lépésre végigvesszük, hogyan tudod a useState helyett a useImmer-t alkalmazni.

Legfontosabb felismerések

• A useImmer egy useState helyettesítő, amely megkönnyíti a mutálható State kezelését a Reactben.
• A useImmer segítségével közvetlenül módosíthatod a tömböket és objektumokat anélkül, hogy kézzel új hivatkozásokat kellene létrehoznod.
• A mutációkat automatikusan új, nem megváltoztatható állapotokká alakítja át, ami jelentősen egyszerűsíti a kezelést.

Lépésről lépésre útmutató

A useImmer telepítése

Először is bizonyosodj meg róla, hogy a useImmer telepítve van. Erre a terminál parancs segítségével kerül sor:

npm install immer

A telepítés befejezése után ellenőrizd, hogy a csomag megfelelően szerepel-e a package.json fájlodban. Mindig látnod kell a függőségek listájában.

A useImmer használata

Most, hogy a useImmer telepítve van, használhatod a projektedben. Egyszerűen importáld a fájlba, ahol a State-eket kezelni szeretnéd:

import { useImmer } from 'use-immer';

Bevezetés a useImmer használatába

A kódstruktúrád szinte ugyanaz marad, mint a useState esetében. A useState helyett a useImmer-t használod a jelenlegi állapotod és a állapot változtatásának funkciójának megkapásához.

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

Ebben a példában az initialVideos a State kezdőértéke. Most már használhatod a setVideos funkciót az állapotod módosítására.

Mutációk a useImmer segítségével

A useImmer-rel lehetőséged van a State direkt mutálására. Ez azt jelenti, hogy olyan módszereket használhatsz, mint a push vagy splice anélkül, hogy kézzel új tömböt vagy objektumot kellene létrehoznod. Itt egy példa arra, hogyan adhatsz hozzá egy új videót:

setVideos(draft => { draft.push(newVideo); // az újVideo a hozzáadni kívánt objektum
});

Ebben az esetben a draft egy módosítható kép a State-ednek. Minden rajta végzett változtatás automatikusan egy új, nem megváltoztatható State létrehozásához vezet.

Változtatások az meglévő bejegyzéseken

Ha egy meglévő bejegyzést szeretnél módosítani, az useImmer segítségével szintén egyszerű. Egyszerűen meg kell találnod az elemet a tömbben és el kell végezned a kívánt változtatásokat:

setVideos(draft => { const videoToEdit = draft.find(video => video.id === targetId); if (videoToEdit) { videoToEdit.title = newTitle; // Cím változtatása videoToEdit.source = newSource; // Forrás változtatása }
});

Ebben az esetben hozzáférhetsz egy konkrét videóhoz a draft tömbben, és elvégezheted a kívánt változtatásokat. Ezeket a változtatásokat automatikusan új hivatkozásként kezeli.

Bejegyzés törlése

A bejegyzés törlése szintén egyszerűbb. Ehhez használhatsz filter vagy splice-t a kívánt elem eltávolításához. Itt egy példa a splice használatával:

setVideos(draft => { const index = draft.findIndex(video => video.id === targetId); if (index!== -1) { draft.splice(index, 1); // Videó eltávolítása }
});

Eltávolítja a megfelelő azonosítójú videót a vázlat tömbből.

Integráció meglévő projektekben

A useState helyettesítése useImmerrel jelentősen egyszerűsítheti és átláthatóbbá teheti a kódodat. Csak győződj meg róla, hogy mindenhol, ahol useState-t használtál, képes vagy bevezetni a useImmert.

Fontos megjegyezni, hogy a useImmer használata nem negatívan befolyásolja a teljesítményt. Mindig ügyelj arra, hogy a kódod világos és jól strukturált maradjon.

Összefoglalás

Ebben az útmutatóban megtanultad, hogyan használhatod fel a useImmert a React projektedben az állapot kezelés egyszerűsítésére. Most már közvetlenül is hozzáférhetsz a mutációkhoz, ami hatékonyabbá és kellemesebbé teszi a fejlesztést. Az automatikus átalakításnak köszönhetően az állapotok megőrzik változatlanságukat, a React pedig gondoskodik róla, hogy minden változás megfelelően észlelhető legyen.