Abgeleitete und asynchrone Atoms

Erstellen Sie ein abgeleitetes Atom, indem Sie eine Getter-Funktion übergeben: const doubleAtom = atom(get => get(countAtom) * 2). Dieses Atom speichert keinen eigenen Wert, sondern berechnet ihn jedes Mal neu, wenn sich countAtom ändert.

Abgeleitete Atome sind ohne manuelle Synchronisierung immer aktuell. Sie entsprechen in Jotai den berechneten Eigenschaften.

Jotai erfasst, auf welche Atome innerhalb der Getter-Funktion zugegriffen wurde, und wertet das abgeleitete Atom automatisch neu aus, wenn sich eines davon ändert. Sie müssen Abhängigkeiten nicht explizit deklarieren.

Wenn der Getter get(atomA) und get(atomB) aufruft, wird das abgeleitete Atom aktualisiert, sobald sich entweder atomA oder atomB ändert.

Ein beschreibbares abgeleitetes Atom verfügt sowohl über einen Getter als auch über einen Setter: atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase())). Beim Lesen wird der transformierte Wert geliefert, beim Schreiben wird der Wert transformiert und zurückgespeichert.

Dieses Muster ermöglicht eine bidirektionale Datentransformation, ohne das Basis-Atom direkt offenzulegen.

Die Getter-Funktion kann asynchron sein: const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); }). Jotai akzeptiert Promises aus Atom-Getter-Funktionen nativ.

Wenn sich userIdAtom ändert, führt Jotai den asynchronen Getter automatisch erneut aus, und die konsumierende Komponente wird während des Abrufs suspendiert.

Asynchrone Atome lassen sich nahtlos in React Suspense integrieren. Umschließen Sie die konsumierende Komponente mit einer Suspense-Grenze und einem Fallback. Die Komponente wird angehalten, solange das Promise aussteht, und gerendert, sobald es aufgelöst wird.

Dadurch entfällt die manuelle Verwaltung des Ladezustands in der Komponente: kein isLoading-Flag und kein useEffect zum Abrufen von Daten.

Importieren Sie loadable aus jotai/utils. Umschließen Sie ein asynchrones Atom: const loadableUserAtom = loadable(userAtom). Komponenten, die loadableUserAtom lesen, erhalten {state: 'loading'}, {state: 'hasData', data: user} oder {state: 'hasError', error}, ohne suspendiert zu werden.

Verwenden Sie loadable, wenn Sie einen eigenen Ladezustand direkt in der Oberfläche anzeigen möchten, anstatt sich auf eine Suspense-Grenze zu verlassen.

Das Dienstprogramm atomWithReset aus jotai/utils erstellt ein Atom, das mithilfe des RESET-Symbols auf seinen Anfangswert zurückgesetzt werden kann. Das ist sauberer, als den Anfangswert manuell zu speichern und erneut anzuwenden.

Setzen Sie in Formularen beim Absenden oder Abbrechen alle Feldatome zurück, indem Sie in einem einzigen Handler jeden Setter mit RESET aufrufen.

Ein abgeleitetes Atom kann aus mehreren anderen Atomen lesen: const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) })). Dadurch entsteht eine einzelne stabile Referenz, die aktualisiert wird, wenn sich eine beliebige Abhängigkeit ändert.

Komponenten, die nur die Zusammenfassung benötigen, abonnieren summaryAtom statt alle drei einzelnen Atome zu abonnieren.

Abgeleitete Atome können abhängig von einer Bedingung aus unterschiedlichen Atomen lesen: const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom)). Wenn modeAtom wechselt, ändert das abgeleitete Atom automatisch seine Datenquelle.

Jotai abonniert bei jeder Auswertung erneut das richtige Atom und stellt so sicher, dass keine veralteten Daten aus dem inaktiven Zweig verwendet werden.

Wenn der Getter eines asynchronen Atoms einen Fehler auslöst oder ablehnt, wird der Fehler bei der Verwendung mit Suspense an die nächste React-Fehlergrenze weitergegeben. Mit loadable erscheint der Fehler im Feld state.error und kann direkt in der Oberfläche behandelt werden.

Kombinieren Sie asynchrone Atome im Produktivcode immer entweder mit einem ErrorBoundary oder einem loadable-Wrapper.

Abgeleitete Atome speichern ihr letztes Ergebnis zwischen. Wenn alle abhängigen Atome bei der vorherigen und der aktuellen Auswertung dieselben Werte liefern, gibt das abgeleitete Atom dieselbe Referenz zurück und es kommt zu keinen erneuten Renderings nachgelagerter Komponenten.

Bei aufwendigen Ableitungen, etwa der Verarbeitung großer Arrays, bietet diese Zwischenspeicherung erhebliche Performancevorteile, ohne dass eine zusätzliche Konfiguration erforderlich ist.

Was geschieht mit einer Komponente, die ein asynchrones Atom liest, während das zugehörige Promise noch aussteht?

Abgeleitete Atome berechnen Werte aus anderen Atomen mithilfe von Getter-Funktionen und automatischer Abhängigkeitsverfolgung. Asynchrone Atome verwenden asynchrone Getter und lassen sich standardmäßig in React Suspense integrieren. Verwenden Sie loadable aus jotai/utils, um Suspense nicht zu verwenden und Lade- sowie Fehlerzustände direkt in der Oberfläche zu behandeln.

Beschreibbare abgeleitete Atome ermöglichen bidirektionale Transformationen, und bedingte Atome wechseln abhängig von den Werten anderer Atome dynamisch ihre Datenquelle.