Durumu localStorage ile Eşitleme

İlk akla gelen yaklaşım, localStorage'ı bir yerde okuyup başka bir yerde yazmaktır; ancak bu iki işlem zamanla birbirinden kopabilir. Kalıcı hale getirmeyi unutan durum güncellemeleri veya duruma yansımayan kalıcı değerler hatalara yol açar.

React durumunu ve depolamayı aynı çizgide tutan tek bir doğruluk kaynağına ihtiyacınız vardır.

Temiz çözüm, useState'i saran ve değişiklikleri otomatik olarak kalıcı hale getiren bir useLocalStorage kancasıdır. Tıpkı useState gibi bir değer ve ayarlayıcı döndürür.

Bu kancayı kullananlar onu normal durum gibi kullanır, ancak ek bir işlem yapmadan kalıcılık elde eder.

localStorage'ı okumak eşzamanlı bir işlemdir; bu nedenle bunu her yeniden oluşturmada yapmamalısınız. useState'e tembel başlatıcı olan bir işlev verin; böylece okuma yalnızca ilk eklemede gerçekleşir.

Bu işlevin içinde depolanan değeri ayrıştırır veya sağlanan varsayılan değeri döndürürsünüz.

İlk durumu doğrudan bir bağımsız değişken olarak hesaplarsanız, ilk oluşturma sonrasında yok sayılmasına rağmen bu ifade her yeniden oluşturmada çalışır. Bir işlev kullandığınızda React onu yalnızca bir kez çağırır.

localStorage okumalarında bu yaklaşım, her yeniden oluşturmada ana iş parçacığında tekrarlanan eşzamanlı çalışmayı önler.

Güncellemeleri kalıcı hale getirmek için değer her değiştiğinde çalışan bir useEffect ekleyin ve localStorage.setItem(key, JSON.stringify(value)) çağrısını yapın.

Değeri bağımlılık dizisine eklemek, her durum değişikliğinde depolamaya otomatik olarak yazılmasını sağlar.

Önceki değere dayalı bir ayarlama yaparken işlevsel biçimi kullanın: setValue(prev => prev + 1). Bu, yakalanan eski bir değerin yazılmasına neden olan eski kapanımları önler.

Bu yaklaşım, özellikle güncel olmayan bir anlık görüntüyü yakalayabilecek olay işleyicileri ve etkiler içinde önemlidir.

getItem, anahtar mevcut olmadığında null döndürür. Başlatıcınız bunu algılamalı ve null değerini ayrıştırmaya çalışmak yerine varsayılan değere dönmelidir.

stored != null ? JSON.parse(stored) : defaultValue gibi bir kontrol, ilk ziyareti sorunsuz biçimde ele alır.

TypeScript'te kancayı genel tür kullanacak şekilde tanımlayabilirsiniz: function useLocalStorage<T>(key: string, initial: T). Bu, değer türünü koruyarak kancayı kullananlara tam tür güvenliği sağlar.

Dönen demetin türü, useState ile eşleşecek şekilde [T, Dispatch<SetStateAction<T>>] olarak tanımlanır.

Zamanla veri yapınız değişir ve eski depolanmış değerler yeni kodu bozabilir. Eski biçimleri algılayabilmek için verilerin yanında bir sürüm anahtarı da depolayın.

Örneğin { version: 2, data } değerini kaydedip okuma sırasında sürümü karşılaştırabilirsiniz.

Depolanan sürüm güncel sürümle eşleşmediğinde eski değeri olduğu gibi kullanmak yerine silin veya yeni biçime taşıyın. En basit yöntem, güncelliğini yitirmiş kaydı kaldırıp varsayılan değerlere dönmektir.

Bu, uygulamanızın daha eski bir sürümü tarafından yazılmış verilerin çökme oluşturmasını önler.

Tam bir useLocalStorage kancası; verileri güvenli biçimde okuyup ayrıştıran tembel bir başlatıcıyı, işlevsel güncellemeleri destekleyen bir ayarlayıcıyı ve sürüm bilgisiyle depolamaya yazan bir useEffect'i birleştirir.

Sonuç, yeniden yüklemelerden sonra da varlığını sürdüren ve doğrudan kullanılabilen bir useState alternatifidir.

Durum başlatma hakkındaki anlayışınızı sınayın.

Tembel başlatıcı içeren bir useLocalStorage kancası oluşturmayı, değişiklikleri useEffect aracılığıyla kalıcı hale getirmeyi, eski kapanımları önlemek için işlevsel güncellemeleri kullanmayı ve boş değerleri ele almayı öğrendiniz.

Ayrıca TypeScript genel türlerini ve eski verileri güvenli biçimde temizlemek için sürümlendirmeyi gördünüz.