useSyncExternalStore ile Özel Mağaza Oluşturma

Özel bir durum deposunun üç şeye ihtiyacı vardır: bir miktar durum, dinleyicileri kaydetmek için bir abone olma yöntemi ve geçerli durumu okumak için bir getSnapshot yöntemi. useSyncExternalStore'un beklediği sözleşmenin tamamı budur.

Durum deposunu bu kadar küçük tutmak onu çerçeveden bağımsız hâle getirir; böylece aynı durum deposu React'in içinde veya dışında kullanılabilir.

Bir createStore fabrikası başlangıç değeri alır ve getSnapshot, abone olma ve güncelleme yöntemi içeren bir nesne döndürür. İçeride geçerli durumu ve bir dizi dinleyici geri çağırmasını tutar.

Bu fabrika deseni, tek bir yeniden kullanılabilir işlevle birden çok bağımsız durum deposu oluşturmanızı sağlar.

Güncelleme işlevi durumu değiştirdiğinde yeni değeri atar ve ardından kaydedilmiş her dinleyiciyi çağırır. Bu dinleyiciler, React'in abone olma işlevi aracılığıyla sağladığı geri çağırmalardır.

Onları çağırmak, React'e durum deposunun değiştiğini bildirir; React de getSnapshot'u yeniden okuyarak durum deposundan okuyan bileşenleri yeniden oluşturur.

Bir bileşen, durum deposunun abone olma ve getSnapshot yöntemleriyle useSyncExternalStore'u çağırarak durum deposundan okur. Kanca geçerli değeri döndürür ve değer değiştiğinde bileşeni yeniden oluşturur.

Bunu useStore gibi özel bir kancaya sarmalayarak bileşenlerin her seferinde kanca parametrelerini kendilerinin bağlaması yerine tek bir işlev çağırmasını sağlayabilirsiniz.

Durum deposu modül düzeyinde bir nesne olduğundan, onu içe aktaran her bileşen aynı durumu paylaşır; herhangi bir bağlam sağlayıcısı gerekmez. Sarılacak bir ağaç ve özellikleri ağaç boyunca aktarma ihtiyacı yoktur.

Harici durum depolarının önemli bir çekiciliği budur: sağlayıcı hiyerarşisi yerine düz bir içe aktarma ve kullanma modeliyle paylaşılan genel durum sunarlar.

Tek ve yekpare bir durum deposu yerine her biri durumun bir parçasının sahibi olan birkaç küçük durum deposu oluşturabilirsiniz. Bileşenler yalnızca ilgilendikleri parçalara abone olur.

Bu, sorumlulukları birbirinden ayırır ve yeniden oluşturmaları sınırlar; çünkü bir parçanın değişmesi, başka bir parçadan okuyan bileşenleri hiçbir zaman etkilemez.

Popüler bir minimal durum kütüphanesi olan Zustand, tam olarak bu desen üzerine kuruludur ve 4. sürümden beri içeride useSyncExternalStore kullanır. Küçük API'si, özünde seçici katmanına sahip, özenle geliştirilmiş bir createStore'dur.

Bu bağlantıyı görmek, bu tür kütüphanelerin gizemini ortadan kaldırır: Bunlar, kendiniz oluşturabileceğiniz aynı temel yapının ince ve kullanımı kolay sarmalayıcılarıdır.

getSnapshot işlevine, bir bileşenin kullandığı durumun yalnızca ilgili bölümünü döndüren bir seçici geçirerek bileşenin yalnızca bu bölüm değiştiğinde yeniden oluşturulmasını sağlarsınız.

Bu, seçici sonucunun kararlı olmasını gerektirir. Böylece ilgili dilime yapılan güncellemeleri kapsamlandırırken yeni başvurudan kaynaklanan sonsuz döngüyü önlemek için türetilmiş değerleri önbelleğe alabilirsiniz.

Hata ayıklama amacıyla bir depoya etiket ekleyip güncellemeleri günlüğe kaydedebilir veya hangi deponun ne zaman değiştiğini izleyebilmek için tarayıcı geliştirici araçlarıyla bütünleştirebilirsiniz.

Güncelleme işleminin içine geliştirme bayrağının arkasında koşullu olarak yerleştirilen basit bir konsol günlüğü bile, depoyu oluştururken durum akışını anlamanıza yardımcı olur.

Depo düz JavaScript olduğundan mantığını doğrudan sınayabilirsiniz: güncelleme işlevini çağırıp getSnapshot'ın yeni değeri döndürdüğünü doğrulayabilir, herhangi bir şey oluşturmaya gerek bırakmayabilirsiniz.

Depoyu, ondan veri okuyan bir bileşen oluşturarak React içinde de sınayabilir ve güncellemeden sonra yeniden oluşturmaların gerçekleştiğini doğrulayabilirsiniz. Böylece hem depoyu hem de React ile bütünleşmesini kapsarsınız.

Özel deponun abone olma yönteminin sözleşmesini hatırlayın.

Özel bir depoda durum, abone olma ve getSnapshot bulunmalıdır. Bir createStore fabrikası ile dinleyicilere bildirim gönderen bir güncelleme işlevi, Provider olmadan paylaşılan genel bir durum sağlar; çünkü modül içe aktarmaları tek bir örneği paylaşır.

Yeniden oluşturmaları sınırlamak için birden çok durum dilimi deposu ve seçici kullanırken başvuruların kararlı olması gerektiğini unutmayın. Zustand v4+ tam olarak bu düzen üzerine kuruludur ve düz JS deposunu React içinde ve dışında sınamak kolaydır.