Vienkāršāka stāvokļa pārvaldība ar lietojumprogrammu UseImmer lietojumprogrammā React

React lietojumprogrammā darbs ar stāvokli dažkārt var sagādāt grūtības, jo īpaši, ja runa ir par izpratni par mutācijām un pareizu atsauču apstrādi. Lietojot useState setter, bieži vien ir jārada jauni masīvi vai objekti, lai nodrošinātu, ka React atpazīst izmaiņas. Tas var ātri kļūt mulsinoši un prasīt daudz koda. Alternatīva ir useImmer, kas ļauj mainīt stāvokli daudz intuitīvākā veidā. Šajā rokasgrāmatā mēs soli pa solim aplūkosim, kā useState vietā izmantot useImmer.

Galvenās atziņas

• useImmer ir useState aizstājējs, kas atvieglo mainīgā stāvokļa apstrādi React.
• Izmantojot useImmer, varat veikt izmaiņas tieši masīvos un objektos, neradot jaunas atsauces manuāli.
• Mutācijas tiek automātiski pārveidotas par jauniem, nemainīgiem stāvokļiem, kas ievērojami atvieglo to apstrādi.

Soli pa solim

UseImmer instalēšana

Vispirms ir jāpārliecinās, vai ir instalēta useImmer. To var izdarīt, izmantojot termināļa komandu

npm install always

Kad instalēšana ir pabeigta, jāpārbauda, vai pakete ir pareizi parādījusies jūsu package.json failā. Tai vienmēr jābūt redzamai atkarību sarakstā.

UseImmer izmantošana

Tagad, kad useImmer ir instalēta, varat to izmantot savā projektā. Vienkārši importējiet to failā, kurā vēlaties pārvaldīt stāvokli:

importējiet { useImmer } no 'use-immer';

Sākot lietot useImmer

Salīdzinot ar useState, jūsu koda struktūra paliek gandrīz nemainīga. UseState vietā jūs izmantojat useImmer, lai iegūtu pašreizējo stāvokli, un funkciju, lai mainītu stāvokli.

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

Šajā piemērā initialVideos ir jūsu stāvokļa sākuma vērtība. Tagad jūs varat izmantot setVideos, lai veiktu izmaiņas savā stāvoklī.

Mutācijas ar useImmer

Izmantojot useImmer, jūs varat tieši mutēt stāvokli. Tas nozīmē, ka varat izmantot tādas metodes kā push vai splice, manuāli neradot jaunu masīvu vai objektu. Šeit ir piemērs, kā jūs varat pievienot jaunu videoklipu:

Tas ir, piemēram, šāds piemērs: setVideos(draft => { draft.push(newVideo); // newVideo ir objekts, kas jāpievieno });

Šajā gadījumā draft būs modificējams jūsu valsts attēls. Veicot tajā jebkādas izmaiņas, automātiski tiks izveidots jauns, nemainīgs stāvoklis.

Izmaiņas esošajos ierakstos

Ja vēlaties mainīt esošo ierakstu, arī tas ir vienkārši, izmantojot useImmer. Viss, kas jums jādara, ir jāatrod ieraksts masīvā un jāveic vēlamās izmaiņas:

iestatītVideos(draft => { const videoToEdit = draft.find(video => video.id === targetId); if (videoToEdit) { videoToEdit.title = newTitle; // Mainīt nosaukumu videoToEdit.source = newSource; // Mainīt avotu } });

Šeit jūs varat piekļūt konkrētam videoklipam projekta masīvā un veikt vēlamās izmaiņas. Šīs izmaiņas automātiski tiek uzskatītas par jaunām atsaucēm.

Ieraksta dzēšana

Ierakstu dzēšana ir arī vienkāršāka. Lai noņemtu vajadzīgo elementu, varat izmantot filtru vai salaidumu. Šeit ir piemērs ar splice:

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

Tādējādi no draft masīva tiek noņemts video ar attiecīgo ID.

Integrācija esošajos projektos

Aizstājot useState ar useImmer, var ievērojami vienkāršot kodu un padarīt to pārskatāmāku. Jums tikai jāpārliecinās, ka visur, kur izmantojāt useState, varat ieviest useImmer.

Ir svarīgi atzīmēt, ka useImmer izmantošana negatīvi neietekmē veiktspēju. Tomēr jums vienmēr jāpārliecinās, ka jūsu kods ir skaidrs un labi strukturēts.

Kopsavilkums

Šajā rokasgrāmatā jūs uzzinājāt, kā izmantot useImmer savā React projektā, lai vienkāršotu stāvokļa apstrādi. Tagad jums ir tieša piekļuve mutācijām, kas padara izstrādi efektīvāku un patīkamāku. Automātiski konvertējot uz nemainīgiem stāvokļiem, React saglabā kontroli un nodrošina, ka visas izmaiņas tiek pienācīgi atpazītas.