Türetilmiş Atomlar ve Eş Zamanlı Olmayan Atomlar

Bir alıcı işlevi aktararak türetilmiş bir atom oluşturun: const doubleAtom = atom(get => get(countAtom) * 2). Bu atomda saklanan bir değer yoktur; countAtom her değiştiğinde yeniden hesaplanır.

Türetilmiş atomlar, elle eşzamanlama gerektirmeden her zaman güncel kalır. Bunlar, Jotai'deki hesaplanan özelliklerin karşılığıdır.

Jotai, alıcı işlevinin içinde hangi atomlara erişildiğini takip eder ve bunlardan herhangi biri değiştiğinde türetilmiş atomu otomatik olarak yeniden değerlendirir. Bağımlılıkları açıkça bildirmeniz gerekmez.

Alıcı işlev get(atomA) ve get(atomB) çağrılarını yapıyorsa türetilmiş atom, atomA veya atomB'den biri değiştiğinde güncellenir.

Yazılabilir bir türetilmiş atomda hem alıcı hem de setter bulunur: atom(get => get(baseAtom).toUpperCase(), (get, set, newValue) => set(baseAtom, newValue.toLowerCase())). Okuma işlemi dönüştürülmüş değeri verir; yazma işlemi ise değeri dönüştürüp geri kaydeder.

Bu örüntü, temel atomu doğrudan açığa çıkarmadan iki yönlü veri dönüşümü gerçekleştirir.

Alıcı işlevi eş zamanlı olmayan bir işlev olabilir: const userAtom = atom(async get => { const id = get(userIdAtom); return await fetchUser(id); }). Jotai, atom alıcılarından döndürülen Promise'leri yerel olarak kabul eder.

userIdAtom değiştiğinde Jotai, eş zamanlı olmayan alıcıyı otomatik olarak yeniden çalıştırır ve veriler alınırken tüketici bileşeni askıya alınır.

Eş zamanlı olmayan atomlar React Suspense ile sorunsuz biçimde bütünleşir. Tüketici bileşenini bir geri dönüş içeren Suspense sınırıyla sarın. Promise beklemedeyken bileşen askıya alınır, Promise çözüldüğünde oluşturulur.

Bu, bileşendeki yükleme durumu yönetimini elle yapma gereğini ortadan kaldırır: isLoading bayrağına veya veri almak için useEffect kullanımına gerek kalmaz.

loadable'ı jotai/utils içinden içe aktarın. Eş zamanlı olmayan bir atomu sarın: const loadableUserAtom = loadable(userAtom). loadableUserAtom'ı okuyan bileşenler, askıya alınmadan {state: 'loading'}, {state: 'hasData', data: user} veya {state: 'hasError', error} alır.

Suspense sınırına güvenmek yerine satır içinde özel bir yükleme durumu oluşturmanız gerektiğinde loadable kullanın.

jotai/utils içindeki atomWithReset yardımcı programı, RESET simgesi kullanılarak başlangıç değerine sıfırlanabilen bir atom oluşturur. Bu yaklaşım, başlangıç değerini elle takip edip yeniden uygulamaktan daha temizdir.

Formlarda, tek bir işleyicide her setter'ı RESET ile çağırarak gönderme veya iptal sırasında tüm alan atomlarını sıfırlayın.

Türetilmiş bir atom, başka birden çok atomu okuyabilir: const summaryAtom = atom(get => ({ user: get(userAtom), settings: get(settingsAtom), count: get(countAtom) })). Bu, herhangi bir bağımlılık değiştiğinde güncellenen tek ve kararlı bir başvuru oluşturur.

Yalnızca özete ihtiyaç duyan bileşenler, üç ayrı atomun tümüne abone olmak yerine summaryAtom'a abone olur.

Türetilmiş atomlar koşula bağlı olarak farklı atomları okuyabilir: const activeDataAtom = atom(get => get(modeAtom) === 'A' ? get(dataAAtom) : get(dataBAtom)). modeAtom değiştiğinde türetilmiş atom veri kaynağını otomatik olarak değiştirir.

Jotai, her değerlendirmede doğru atoma yeniden abone olur ve etkin olmayan daldan kalan eski verilerin kullanılmamasını sağlar.

Eş zamanlı olmayan bir atomun alıcısı hata fırlatır veya reddedilirse, Suspense ile kullanıldığında hata en yakın React hata sınırına aktarılır. loadable ile hata, satır içinde işlenebilmesi için state.error alanında görünür.

Üretim kodunda eş zamanlı olmayan atomları her zaman bir ErrorBoundary veya loadable sarmalayıcıyla birlikte kullanın.

Türetilmiş atomlar son sonuçlarını önbelleğe alır. Tüm bağımlı atomlar önceki değerlendirmedeki değerlerin aynısını döndürürse türetilmiş atom aynı başvuruyu döndürür ve alt akışta yeniden oluşturma gerçekleşmez.

Pahalı türetmelerde (büyük dizi dönüşümleri gibi) bu önbelleğe alma, ek yapılandırma gerektirmeden önemli performans kazanımları sağlar.

Promise beklemedeyken eş zamanlı olmayan bir atomu okuyan bileşene ne olur?

Türetilmiş atomlar, otomatik bağımlılık takibiyle alıcı işlevlerini kullanarak diğer atomlardan değer hesaplar. Eş zamanlı olmayan atomlar eş zamanlı olmayan alıcılar kullanır ve varsayılan olarak React Suspense ile bütünleşir; bundan vazgeçip yükleme ve hata durumlarını satır içinde işlemek için jotai/utils içindeki loadable'ı kullanın.

Yazılabilir türetilmiş atomlar iki yönlü dönüşümler sağlar ve koşullu atomlar, diğer atom değerlerine göre veri kaynaklarını dinamik olarak değiştirir.