REACT STATE MANAGEMENT

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.

Onur Dayıbaşı

Published in

Frontend Development With JS

4 min readJul 25, 2021

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.

React Context ve useReducer sonrasında Redux’a Gerek Var mı?

Kapsama Aldıklarım;

1. Component ve Container Yapısı

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

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.

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 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)

2. Redux Selector Yapısı

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ı

Reselect içerisindeki createSelector
proxy-memoize
re-reselect
reselect-tools
redux-views

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

3. React-Redux Hooks (useSelector, useDispatch) Kullanımı

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 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.

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();

4. Apollo-Client ve GraphQL kullanımı

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 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