Atomy pochodne i asynchroniczne

Atom pochodny tworzy się przez przekazanie funkcji getter: const doubleAtom = atom(get => get(countAtom) * 2). Ten atom nie przechowuje własnej wartości — przelicza ją ponownie za każdym razem, gdy zmienia się countAtom.

Pochodne atomy są zawsze aktualne bez konieczności ręcznej synchronizacji. Są odpowiednikiem właściwości obliczanych w Jotai.

Jotai śledzi, do których atomów uzyskano dostęp wewnątrz funkcji getter, i automatycznie ponownie oblicza atom pochodny, gdy zmieni się którykolwiek z nich. Nie trzeba jawnie deklarować zależności.

Jeśli getter wywołuje get(atomA) i get(atomB), atom pochodny aktualizuje się za każdym razem, gdy zmieni się atomA lub atomB.

Zapisywalny atom pochodny ma zarówno getter, jak i setter: atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase())). Odczyt zwraca przekształconą wartość, a zapis przekształca ją i zapisuje z powrotem.

Ten wzorzec umożliwia dwukierunkową transformację danych bez bezpośredniego udostępniania bazowego atomu.

Funkcja getter może być asynchroniczna: const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); }). Jotai natywnie obsługuje obietnice zwracane przez funkcje getter atomów.

Gdy userIdAtom się zmienia, Jotai automatycznie ponownie wykonuje asynchroniczną funkcję getter, a korzystający z niej komponent zostaje wstrzymany na czas pobierania danych.

Asynchroniczne atomy bezproblemowo integrują się z React Suspense. Należy opakować korzystający z nich komponent w granicę Suspense z wartością fallback. Komponent zostaje wstrzymany, gdy Promise jest w toku, i renderuje się po jego rozwiązaniu.

Eliminuje to konieczność ręcznego zarządzania stanem ładowania w komponencie: nie trzeba używać flagi isLoading ani useEffect do pobierania danych.

Należy zaimportować loadable z jotai/utils. Należy opakować asynchroniczny atom: const loadableUserAtom = loadable(userAtom). Komponenty odczytujące loadableUserAtom otrzymują {state: 'loading'}, {state: 'hasData', data: user} lub {state: 'hasError', error} bez wstrzymywania renderowania.

Należy użyć loadable, gdy trzeba wyświetlać własny stan ładowania bezpośrednio w komponencie, zamiast polegać na granicy Suspense.

Narzędzie atomWithReset z jotai/utils tworzy atom, który można przywrócić do wartości początkowej za pomocą symbolu RESET. Jest to prostsze niż ręczne śledzenie i ponowne ustawianie wartości początkowej.

W formularzach należy zresetować wszystkie atomy pól podczas przesyłania lub anulowania, wywołując setter każdego z nich z RESET w ramach jednej funkcji obsługi.

Atom pochodny może odczytywać dane z wielu innych atomów: const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) })). Tworzy to pojedynczą stabilną referencję, która aktualizuje się po zmianie dowolnej zależności.

Komponenty, które potrzebują tylko podsumowania, subskrybują summaryAtom zamiast wszystkich trzech atomów osobno.

Atom pochodny może warunkowo odczytywać różne atomy: const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom)). Gdy modeAtom się przełącza, atom pochodny automatycznie zmienia źródło danych.

Jotai ponownie subskrybuje właściwy atom przy każdej ewaluacji, dzięki czemu nie pojawiają się nieaktualne dane z nieaktywnej gałęzi.

Jeśli getter asynchronicznego atomu zgłosi wyjątek lub odrzuci obietnicę, błąd zostanie przekazany do najbliższej granicy błędów Reacta przy użyciu Suspense. W przypadku loadable błąd pojawi się w polu state.error, co umożliwi obsługę bezpośrednio w komponencie.

W kodzie produkcyjnym należy zawsze łączyć asynchroniczne atomy z ErrorBoundary albo opakowaniem loadable.

Pochodne atomy zapamiętują swój ostatni wynik. Jeśli wszystkie atomy zależności zwrócą takie same wartości jak podczas poprzedniej ewaluacji, atom pochodny zwróci tę samą referencję i nie dojdzie do ponownego renderowania komponentów zależnych.

W przypadku kosztownych obliczeń pochodnych, takich jak transformacje dużych tablic, ta memoizacja zapewnia znaczną poprawę wydajności bez dodatkowej konfiguracji.

Co dzieje się z komponentem odczytującym asynchroniczny atom, gdy jego Promise jest w toku?

Pochodne atomy obliczają wartości na podstawie innych atomów za pomocą funkcji getter i automatycznego śledzenia zależności. Asynchroniczne atomy używają asynchronicznych funkcji getter i domyślnie integrują się z React Suspense; aby zrezygnować z Suspense i obsługiwać stany ładowania oraz błędów bezpośrednio w komponencie, należy użyć loadable z jotai/utils.

Zapisywalne atomy pochodne umożliwiają dwukierunkowe transformacje, a atomy warunkowe dynamicznie zmieniają źródła danych na podstawie wartości innych atomów.