Prostsze zarządzanie stanem za pomocą UseImmer w React

Ogólnie podejmowanie decyzji o Stanie w React może być czasami wyzwaniem, zwłaszcza jeśli chodzi o zrozumienie mutacji i właściwego zarządzania referencjami. Korzystając ze settera useState, często musisz tworzyć nowe tablice lub obiekty, aby zapewnić, że React wykryje Twoje zmiany. To może szybko prowadzić do zagubienia się i wymagać napisania sporej ilości kodu. Alternatywą jest użycie hooka useImmer, który pozwala na zmianę stanu w znacznie bardziej intuicyjny sposób. W tej instrukcji krok po kroku omówimy proces używania useImmer zamiast useState.

Najważniejsze wnioski

• useImmer to zamiennik useState, który ułatwia zarządzanie mutowalnym stanem w React.
• Z useImmer możesz dokonywać zmian bezpośrednio w tablicach i obiektach, bez konieczności ręcznego tworzenia nowych referencji.
• Mutacje są automatycznie przekształcane w nowe, niezmienne stany, co znacznie ułatwia zarządzanie nimi.

Krok po kroku

Instalacja useImmer

Najpierw upewnij się, że useImmer jest zainstalowany. Dokonaj tego za pomocą polecenia terminala:

npm install immer

Po zakończeniu instalacji sprawdź, czy pakiet jest poprawnie uwzględniony w twoim pliku package.json. Zawsze powinieneś zobaczyć go na liście zależności.

Użycie useImmer

Teraz, gdy useImmer jest zainstalowany, możesz go użyć w swoim projekcie. Po prostu zaimportuj go do pliku, w którym chcesz zarządzać stanem:

import { useImmer } from 'use-immer';

Rozpoczęcie korzystania z useImmer

W porównaniu do useState, struktura twojego kodu pozostaje niemal identyczna. Zamiast użycia useState, używasz useImmer, aby uzyskać dostęp do aktualnego stanu i funkcji do zmiany stanu.

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

W tym przykładzie initialVideos to początkowa wartość twojego stanu. Teraz możesz użyć setVideos do dokonywania zmian w swoim stanie.

Mutacje przy użyciu useImmer

Dzięki useImmer masz elastyczność w bezpośredniej mutacji stanu. Oznacza to, że możesz korzystać z metod takich jak push lub splice, bez konieczności ręcznego tworzenia nowej tablicy lub obiektu. Oto przykład dodania nowego wideo:

setVideos(draft => { draft.push(newVideo); // newVideo to dodawany obiekt
});

W tym przypadku draft będzie edytowalnym odwzorowaniem twojego stanu. Wszelkie zmiany przeprowadzone na nim automaticznie prowadzą do utworzenia nowego, niezmienialnego stanu.

Modyfikowanie istniejących wpisów

Jeśli chcesz zmienić istniejący element, również z użyciem useImmer jest to proste. Wystarczy znaleźć wpis w tablicy i dokonać żądanych zmian:

setVideos(draft => { const videoToEdit = draft.find(video => video.id === targetId); if (videoToEdit) { videoToEdit.title = newTitle; // Zmień tytuł videoToEdit.source = newSource; // Zmień źródło }
});

Tutaj możesz uzyskać dostęp do konkretnego wideo w tablicy draft i dokonać pożądanych zmian. Te zmiany są automatycznie traktowane jako nowe referencje.

Usuwanie wpisu

Usunięcie wpisu również jest prostsze. Możesz użyć metody filter lub splice, aby usunąć żądany element. Oto przykład z użyciem splice:

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

Usuwa to wideo o odpowiednim ID z tablicy draft.

Integracja w istniejące projekty

Zamiana useState na useImmer może znacząco uprościć twój kod i sprawić, że będzie bardziej czytelny. Musisz tylko upewnić się, że wszędzie tam, gdzie korzystasz z useState, będziesz w stanie wprowadzić useImmer.

Warto zauważyć, że korzystanie z useImmer nie ma negatywnego wpływu na wydajność. Niemniej jednak zawsze należy dbać o to, aby twój kod był czytelny i dobrze zorganizowany.

Podsumowanie

W tym przewodniku nauczyłeś się, jak korzystać z useImmer w swoim projekcie React, aby ułatwić zarządzanie stanem. Teraz masz bezpośredni dostęp do mutacji, co sprawia, że rozwijanie jest bardziej wydajne i przyjemne. Dzięki automatycznemu przekształcaniu w niezmienny stan, React zachowuje kontrolę, zapewniając poprawne rozpoznanie wszystkich zmian.