Odkrywanie zarządzania stanem w React za pomocą Jotai: praktyczny przewodnik

Zarządzanie stanem w projektach na małą skalę jest ogólnie proste przy użyciu haków i rekwizytów React. Jednak w miarę rozwoju aplikacji i pojawiania się potrzeby udostępniania i uzyskiwania dostępu do danych między różnymi komponentami często prowadzi to do wiercenia podporowego. Niestety wiercenie podporowe może szybko zaśmiecać bazę kodu i stwarzać problemy ze skalowalnością.

Chociaż Redux oferuje świetne rozwiązanie do zarządzania stanem, jego interfejs API może być przytłaczający w przypadku stosunkowo małych projektów. W przeciwieństwie do tego Jotai, minimalna biblioteka zarządzania stanem, która wykorzystuje do zarządzania niezależne jednostki stanów zwane atomami stanu, eliminuje wyzwania, takie jak wiercenie podpór i umożliwia prostsze i skalowalne zarządzanie stanem zbliżać się.

Co to jest Jotai i jak działa?

Jotaj to biblioteka zarządzania stanem, która oferuje proste rozwiązanie do zarządzania stanem w przeciwieństwie do bardziej złożonych alternatyw, takich jak Redux. Wykorzystuje niezależne jednostki stanu zwane atomami do zarządzania stanem w aplikacji React.

Idealnie byłoby, gdyby różne komponenty aplikacji uzyskiwały dostęp i aktualizowały te atomy za pomocą haka dostarczonego przez Jotai o nazwie użyj Atomu. Oto prosty przykład tworzenia atomu Jotai:

import { atom } z„jotai”;
konst liczbaAtom = atom(1);

Aby uzyskać dostęp i pracować z atomami w Jotai, możesz po prostu użyć użyj Atomu hak, który podobnie jak inne Haki reakcji, umożliwia dostęp i aktualizowanie wartości stanu w komponencie funkcjonalnym.

Oto przykład demonstrujący jego użycie:

import { useAtom } z„jotai”;
konst liczbaAtom = atom(1);
funkcjonowaćMój komponent() {
konst [liczba, ustawLiczba] = użyj Atomu (liczbaAtomów);
konst przyrost = () => setCount((prevCount) => prevLiczba + 1);
powrót (


Liczba: {liczba}</p>
Przyrost</button>
 </div>
 );
}

W tym przykładzie użyj Atomu hak służy do uzyskiwania dostępu do liczbaAtom atom i związana z nim wartość. The liczba ustaw służy do aktualizacji wartości atomu, a wszelkie powiązane komponenty zostaną automatycznie ponownie wyrenderowane ze zaktualizowaną wartością.

Uruchamiając tylko komponenty, których dotyczy problem, zmniejsza niepotrzebne ponowne renderowanie w aplikacji. To ukierunkowane podejście do ponownego renderowania zwiększa ogólną wydajność aplikacji.

Pomijając podstawy, zbudujmy prostą aplikację To-do React, aby lepiej zrozumieć możliwości zarządzania stanem Jotai.

Zarządzanie stanem w React przy użyciu Jotai

Rozpocząć, stworzyć aplikację React. Alternatywnie możesz użyj Vite do skonfigurowania projektu React. Po zbudowaniu podstawowej aplikacji React, śmiało zainstaluj Jotai w swojej aplikacji.

npm zainstaluj jotai

Następnie, aby wykorzystać Jotai w swojej aplikacji, musisz otoczyć całą aplikację za pomocą Dostawca część. Ten komponent zawiera magazyn, który służy jako centralne centrum dostarczania wartości atomowych w całej aplikacji.

Dodatkowo pozwala zadeklarować stan początkowy atomów. Zawijając swoją aplikację za pomocą Dostawca, wszystkie komponenty w aplikacji uzyskują dostęp do zdefiniowanych atomów, a następnie mogą wchodzić w interakcje i aktualizować stan poprzez użyj Atomu hak.

import { Dostawca } z"jotai";

Teraz zawiń aplikację w indeks.js Lub main.jsx jak pokazano niżej.

import Reagować z'reagować'
import ReactDOM z„reaguj/klient”
import Aplikacja z„./Aplikacja.jsx”
import'./index.css'
import { Dostawca } z"jotai";
ReactDOM.createRoot(dokument.getElementById('źródło')).renderowanie(



 </Provider>
 </React.StrictMode>,
)

Skonfiguruj magazyn danych

Sklep działa jako centralne repozytorium stanu aplikacji. Zwykle zawiera definicję atomów, selektory i wszelkie inne powiązane funkcje wymagane do zarządzania stanem za pomocą Jotai.

W tym przypadku zarządza atomami do zarządzania listą elementów aplikacji To-do. w źródło katalog, utwórz TodoStore.jsx plik i dodaj poniższy kod.

import { atom } z"jotai";
eksportkonst TodosAtom = atom([]);

Tworząc i eksportując plik TodosAtom, możesz wygodnie wchodzić w interakcje i aktualizować stan zadań do wykonania w różnych komponentach aplikacji.

Zaimplementuj funkcjonalność aplikacji To-Do

Teraz, gdy skonfigurowałeś Jotai w aplikacji React i stworzyłeś atom do zarządzania stanem aplikacji, przejdź naprzód i utwórz prosty komponent zadań do wykonania, który będzie obsługiwał funkcje dodawania, usuwania i edytowania zadań do wykonania rzeczy.

Stwórz nowy komponenty/Todo.jsx plik w źródło informator. W tym pliku dodaj poniższy kod:

1. Zaimportuj magazyn danych i użyj Atomu hak.

   import Reaguj, { stan użycia } z'reagować';
   import { TodosAtom} z„../TodoStore”;
   import { useAtom } z„jotai”;

2. Utwórz komponent funkcjonalny i dodaj elementy JSX.

   konst Do zrobienia = () => {
   
   powrót (
   
   
    symbol zastępczy=„Nowe zadanie”
    wartość={wartość}
    onChange={event => setValue (event.target.value)}
    />
   Dodaj Do zrobienia</button>
   
   
    {todos.map(do zrobienia => (
   
   
    {do zrobienia.tekst}
    handleDelete (todo.id)}>Usuń</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };