По-лесно управление на състоянието с UseImmer в React

Работата с State в React понякога може да бъде предизвикателство, особено когато става въпрос за разбиране на мутации и правилното управление на референции. Когато използвате сетъра на useState, често трябва да създадете нови масиви или обекти, за да се гарантира, че React разпознава промените. Това може бързо да стане объркано и да изисква много код. Алтернатива представлява useImmer, което ви позволява да променяте състоянието по много по-интуитивен начин. В това ръководство ще обхванем стъпка по стъпка процеса как да използвате useImmer вместо useState.

Най-важните заключения

• useImmer е заместител за useState, който улеснява работата с мутиращо State в React.
• С useImmer можете да правите промени директно в масиви и обекти, без да се налага да създавате ръчно нови референции.
• Мутациите автоматично се преобразуват в нови, непроменяеми състояния, което значително опростява управлението.

Ръководство стъпка по стъпка

Инсталиране на useImmer

Първоначално трябва да се уверите, че useImmer е инсталиран. Това става чрез следната команда в терминала:

npm install immer

След като инсталацията приключи, трябва да се уверите, че пакетът е правилно посочен във вашия package.json файл. Винаги трябва да го виждате в списъка на зависимостите.

Използване на useImmer

Сега, след като useImmer е инсталиран, може да го използвате в проекта си. Просто го импортирайте във файла, в който искате да управлявате състоянието:

import { useImmer } from 'use-immer';

Запознаване с използването на useImmer

В сравнение с useState, структурата на вашия код остава почти същата. Вместо useState използвате useImmer, за да получите текущото състояние и функция за промяна на състоянието.

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

В този пример initialVideos е началната стойност на вашия state. Сега можете да използвате setVideos, за да направите промени във вашия state.

Мутации с useImmer

С useImmer имате гъвкавостта да мутирате състоянието директно. Това означава, че можете да използвате методи като push или splice, без да е необходимо да създавате нов масив или обект ръчно. Ето един пример как можете да добавите ново видео:

setVideos(draft => { draft.push(newVideo); // newVideo е обекта, който искате да добавите
});

В този случай draft ще бъде променливо изображение на вашия state. Всички промени, които правите в него, автоматично водят до създаването на ново, непроменяемо състояние.

Промени върху съществуващите записи

Ако искате да промените съществуващ запис, това също е лесно с помощта на useImmer. Просто трябва да намерите записа в масива и да направите желаните промени:

setVideos(draft => { const videoToEdit = draft.find(video => video.id === targetId); if (videoToEdit) { videoToEdit.title = newTitle; // Променете заглавието videoToEdit.source = newSource; // Променете източника }
});

Тук можете да достъпите конкретно видео в draft масива и да направите желаните промени. Тези промени се третират автоматично като нови референции.

Изтриване на запис

Изтриването на запис става също по-лесно. Можете да използвате filter или splice, за да премахнете желания елемент. Ето един пример с splice:

setVideos(draft => { const index = draft.findIndex(video => video.id === targetId); if (index!== -1) { draft.splice(index, 1); // Премахнете видеото }
});

Премахва видеото със съответния идентификатор от draft масива.

Интеграция във вече съществуващи проекти

Замяната на useState с useImmer може значително да опрости и направи по-четим вашия код. Просто трябва да се уверите, че навсякъде, където сте използвали useState, сте в състояние да въведете useImmer.

Важно е да се отбележи, че използването на useImmer не намалява производителността. Винаги обаче трябва да се стремите кодът ви да бъде ясен и добре структуриран.

Резюме

В това ръководство научихте как да използвате useImmer във вашия проект с React, за да опростите управлението на състоянието. Сега можете да имате директен достъп до мутации, което прави разработката по-ефективна и приятна. Чрез автоматичното преобразуване в неизменни състояния, React запазва контрола и се грижи всички промени да бъдат разпознати правилно.