Server State vs UI State

Not: Bu yazıyı yazma nedenim, Redux kullanan kötü yazılmamış bir proje neredeyse görmememdir.

Server State kütüphaneleri web uygulamalarında oldukça sık tekrar edilen verilerin çekilmesini (Data fetching) basitleştirmek için tasarlanmıştır. Bu kütüphanelerle verileri çekme ve cachleme işlemleri için yazmanız gereken “boilerplate” koddan kolayca kurtulabilirsiniz.

Web uygulamalarında genellikle bir veriyi göstermek için server’dan veri çekeriz. Bu veri üzerinde bazen güncellemeler yapıp server’a geri gönderir ayrıca, web uygulamasındaki cachlenmiş verimizi server’la sekronize tutmaya çalışırız.

Web Uygulamalarında;

• UI’da “Loader”, “Error” bileşeni göstermek için loading ve error state’ini yönetiriz.
• Aynı veri için birden fazla request atmamaya çalışırız. (Örneğin uygulama içinde ziyaret ettiğiniz bir sayfaya geri döndüğünüzde veya bir isteğe bağlı butona ardıl şekilde n defa basma gibi durumlarda)
• “Optimistic update” ile aksiyonların sonuçlarını daha hızlı göstermeye çalışırız.
• Cache’in ömrünü kullanıcı etkileşimlerine göre yönetiriz.

Hangisini Ne zaman Kullanmalı?

UI State/Client State

• Tema
• Dil
• Ortak Kullanılan kompleks UI state’ler vb. (Redux’a ihtiyacınız olduğunuzu anlarsınız, anlamıyorsanız muhtemelen ihtiyacınız yoktur.)

Server State

• Backend servislerinden gelen veri (Async data)

Server State Kütüphanelerinin Avantajları

• Cache ve server’dan veri çekmek için kendi Redux pattern’nınızı icat etmenize gerek kalmaz.
• Redux’la iyi bir pattern yazamıyorsanız sizi büyük bir boilerplate koddan kurtarır.
• Backend’den elde ettiğimiz veriyi birden fazla component’da birden fazla defa istek atmadan kolayca kullanabiliriz. Aynı cacheKey’i kullandığı için elde ettiğiniz veriyi “Prop Drilling” vb. yöntemlerle Child Component’lara “Pass etme” derdiniz kalmaz.
• isPending, isError ve isSuccess gibi değişkenleri her istek için yönetmenize gerek kalmaz.
• Pooling, Prefetching gibi işinizi kolaylaştırıcı fonksiyonları kolayca kullanabilirsiniz.
• Kötü yazılmış koda göre çok daha iyi bir performans kazanırsınız.

Popüler Server State Kütüphaneleri

1- rtk-query ❤
2- react-query
3- apollo

Kaynaklar:

1- https://redux-toolkit.js.org/rtk-query/overview
2- https://www.apollographql.com/docs/react/v2/performance/optimistic-ui/