Photo by E Mens on Unsplash

React State Management Yöntemleri — 2

React State yönetimi her zaman zor bir konu oldu. Bu konuda zaman içerisinde farklı farklı yaklaşımlar ve kütüphaneler ortaya çıktı. Bu yazıda kısaca bu kütüphanelerden bahsedeceğim.

Yazıya başlamadan önce bu yazıda state management kapsam içerisine neleri alıp, neleri almayacağımdan bahsedeyim. Kapsama almadığım konuları daha önceden React State Management yazısında bahsetmiştim.

Kapsama ALMADIKLARIM

  • setState ve useState
  • useContext ve useReducer

Kapsama ALDIKLARIM

  • Component ve Container yapısı ve mapStateToProps/mapDispatchToProps
  • Redux CreateSelector yapısı
  • Redux Toolkit useSelector / useDispatch yöntemi
  • Apollo Client ile useQuery/ useMutation yöntemi

konularından giriş seviyesinde bahsetmek ve daha sonraki yazılarda bu içerikleri genişletmek şeklinde olacaktır.

Neden Kapsama Almadım ?

State yönetim kısmında setState ve useState API bileşenin içerisindeki state tutmak ile ilgileniyor, genel bir uygulama seviyesi state yönetimi sağlamıyor.

useContext ve useReducer ise uygulama seviyesi state yönetimi için bir takım yeteneklere sahip olsada büyükçe bir projede Async, Debugging, Tooling, Caching vb.. konularda yeterli altyapıyı sağlayamıyor. Bu konuya aşağıdaki yazıda değinmiştim.

Kapsama Aldıklarım;

Class Component yapısında bileşenleri State, Routing vb.. kavramlardan soyutlamak için Container mekanizması ile Higher Order Component yöntemini kullanarak dış bağımlılıklarını sağladığını anlatmıştık.

Bileşen yapısının dış dünya ile Container üzerinden haberleşmesi gerektiğini bu sayede dış bağımlılıkları olmayan pure / test edilebilir bileşenler geliştirmenin mümkün olacağından React Örnek Proje Mimarisi yazımızda anlamıştık

Container / Component Bileşen Yapısı

Buradaki örnek Container yapısı oluşturmak için Redux ile bağlantıyı 2

  • mapStateToProps: Uygulama state herhangi bir değişim olduğunda bunu bileşene iletir ve bileşenin re-render edilmesini sağlar. Bileşenin ilgili state → props olarak alabilmesine olanak sağlar.
  • mapDispatchToProps: Dispatcher bir takım aksiyonlar ileterek Sync ve Async olarak App State Management güncellenmesini sağlatır.
Container yapısı

Bu yapı içerisinde Component, Container , Store (Reducer, Actions, Constant ve Middleware gibi kavramlar çok yapısal bir şekilde ayrılır, kod satır sayısı ve modül sayısı fazla gibi gözüksede büyük projelerde kodun anlaşılabilirliğini koruduğu için ben bu yapıyı oldukça beğeniyorum.

Örnek Proje Yapısı

Örnek Proje ve Yazılar
Bu konuda örnek proje ve yazılardan bahsedecek olursak;

  • React Sanal DOM Ağacında, Uzak Bileşenleri Redux üzerinden Nasıl Konuştururuz ? (Link)
  • React Redux ile Rest API Çağırımı Nasıl Yapılır ? (Link)
  • React Admin Tool Örnekleri ? (Link)

Bu konuda şu aşamada araştırmalar ve denemeler yapıyorum ama genel kullanım alanları Mevcut State(Durumdan) Türetilmiş Veri Oluşturma aşamasında kullanılıyor.

Türetilmiş veriye neden ihtiyaç duyalım.

  • Birincisi bir takım hesaplama işlemlerine ihtiyaç duyabiliriz. (Sıralama, Toplama vb…)
  • Filtreleme gibi işlemler sonunda verinin oluşturulması

Aslında bu işlemleri 1nci aşamadaki yapıda Component içerisinde de oluşturabiliriz ama Memoization ve Caching alanında bir takım hazır yapıların oluyor olması

Bu kısımda React-Redux connect ile Class bileşenler kullanılarak yapılan yöntemde mapState yöntemi kullanılır.

Bileşenler için önerilen bir alternatif yapıda Class bileşenlerin aksine direk olarak bileşenin içerisinde Hook yöntemi ile genel fonksiyonlara bağlanmak.

React-Hooks Bileşen Kullanımı

React Hooks ile birlikte bileşenlerinizde useMemo ve useCallback yapılarını çok basit bir şekilde kullanabilirsiniz.

Redux-Toolkit ana sayfasından aşağıdaki komutu çalıştırdığınızda size template bir yapı oluşturacak.

npx create-react-app my-app — template redux

By yapıyı bize aşağıdaki şekilde bir proje yapısı oluşturuyor. Features dediği bu bileşen öbeklerinde counterSlice bizim Class Component oluşturduğumuz reducers, actions ve constants karşılık geliyor.

Redux Toolkit Bileşen Yapısı

Async yapılar için createAsyncThunk fonksiyonu bize default olarak sunuluyor. Bileşen içerisinde react-redux kütüphanesinden useSelector ve useDispatch API kullanarak state yönetimini kolaylıkla yapabiliriz.

import { useSelector, useDispatch } from 'react-redux';const count = useSelector(selectCount);
const dispatch = useDispatch();

Apollo-Client yaklaşımı daha basit. Redux-Toolkit manual yaptırdığı bir takım işlemleri sizden soyutlayarak kodunuzu daha basit bir şekilde yazmanızı sağlıyor. REST yerine GraphQL üzerinden çalışmamızı sağlıyor.

Apollo Client Yaklaşımı

Apollo-Client Başlangıç Uygulamasının Linki. ApolloGraphQL sitesinde aşağıdaki resmin anlatıldığı blog yazısında ClientSide Mimari yapısı kısaca özetlenmiş. Apollo Client Redux göre bir takım avantajları bulunuyor

  • Client ve Remove State yönetimi daha iyi soyutlanmış
  • GraphQL default yapısına entegre etmiş.
  • Caching kısmında bir takım işleri daha otomatik yerine getiriyor.
https://www.apollographql.com/blog/apollo-client/caching/dispatch-this-using-apollo-client-3-as-a-state-management-solution/

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store