React, Redux nedir ? Onlarla yaşadığım tecrübe ne oldu ?

Her geçen gün karşımıza yeni teknolojiler, yeni diller, yeni frameworkler çıkıyor. Özellikle front-end development yapan birisiyseniz artık çıkan frameworkleri, kütüphaneleri takip etme şansınız pek kalmadı. Daha birisi çıktı şunu öğreneyim dediğiniz noktada yeni bir şey çıkıyor. Hangisini öğreneceğim telaşı içinde, kendimizi her şeyi yarım yarım öğrenmiş buluyoruz. Çıkan teknoloji iyi, güzel, şık duruyor ancak eskilerde aynı işi yapmıyor mu? Genellikle evet, aynı işi yapıyor. Belki bu yeni çıkan biraz daha havalı yapıyor ancak yine de aynı şeyi yapıyor.

Gecen gün Tmob’un kurucusu Rudi Dökmecioğlu ile bir sohbetimizde React, react-native üzerine konuşuyorduk. Ben react’a kafa yormanın vermiş olduğu heyecan ile şirkette react’ı yaygınlaştırmamız gerektiğini push ederken, onun bu konuya ilişkin güzel bir yorumu oldu. “Evet react, react-native şu an bir çok fayda sağlıyor. Diğer yandan developerlar her zaman yeni challange arıyorlar. Bu sebeple bugün react’a evet desek yarın yeni çıkana bu sefer dönüp, evet dememiz gerekecek.

Aslında bu sözün hem doğru hem yanlış tarafı var.

Konuya sürdürülebilirliği sağlanması gerekli bir şirketin kullanması gerekli dil olarak bakarsanız, evet doğru. Bugün developerlar kendi kişisel gelişimlerinde react’ı yeni bir adım olarak görmeye başladı, diğer taraftan yarın react’ın yaptıklarını angular yapacak olursa ya da X, Y vs. yaparsa bu sefer gözler onlara dönecek. Dolayısı ile bir şirketin kullandığı dil, uzmanlık kazandığı dil o anın konjonktürüne göre verilmemesi gereken bir karar. Şirketin uzmanlaştığı, know-how’ını biriktirdiği, kolaylıkla ilgili platforma ilişkin developer bulabileceği bir dil olmalı.

Diğer taraftan; react’ı kullanmaya başladıkça virtual DOM sisteminin web sitelerine kazandırdığı hızı gözlemliyorsunuz ve bunun bir devrim olduğunu anlıyorsunuz. React dışında react-native’in mobil yazılım geliştirme dünyasına sağlamış olduğu bir çok fayda var. Bunlardan sadece bir tanesi: Müşterinizin native uygulamasını store’a attınız ve bir update geçmeniz gerekiyor. Uygulamaya update’i direk backend üzerinden çıkabiliyorsunuz. İşte bu devrim sayılabilecek bir yenilik. Ancak diğer yandan bir soru işareti yine de var? Peki Apple ya da Google’ın bunun benzerini yarın çıkarmayacağını nereden biliyoruz ? Evet yarın çıkartıp ezebilirler, nitekim Adobe’nin Flash’ını bitirdikleri gibi. Ama yine de şu an mobil ve web dünyasına getirdiği yeni yaklaşımla react benim gözümde bir star’dır. Yeni bir işe giriştiğimde tercih ettiğim dildir.

Redux Logo

Gelelim Redux ile yaşadığım tecrübeye. Redux aslına bakarsanız bir state container’dır. Eğer react dünyasına aşina değilseniz “state” tanımının ne amaçla kullanıldığını bilmiyor olabilirsiniz.

React ile geliştirilecek sistem component’lerden oluşur. Her component kendi içinde kullanacağı veriyi ya props üzerinden ya da state üzerinden alarak kullanır. Props read-only modda çalışır, sadece üst component’in verdiği bilgiyi alt component’e taşır, state ise component içindeki durum bilgisini saklar. Örneğin ekran üzerinde herhangi bir checkbox’ı tıkladınız. Tıkladığınız bilgisini bir state’e bağlarsanız, state bilgisi her checkbox seçiminizde değişecektir. Dolayısı ile state, component içinde herhangi bir şey üzerine durum bilgisi tutan, read-only olmayan bir tanımlamadır.

React’ın yapımcısı facebook’lu mühendisler react’ı çıkardıklarında flux yapısını tanıtmışlar. Flux yapısını kullanan geliştiriciler flux’dan daha iyisi redux olacak diyip, redux’ı hayata geçirmişler. Dolayısı ile artık hayatımızda redux state container’ı var.

Neden kullanıyoruz peki redux’ı?

Aslında en büyük sebep şu: Eğer ki kapsamlı, bir çok component’i birbiri içine geçmiş şekilde projenizde kullanıyorsanız, artık component’lerin state’lerini birbirine taşımak büyük bir zorluk olmaya başlıyor. Dolayısı ile tanımlanmış, standart mimari ile bütün state bilgilerine dışardan erişilebilir, tek bir noktadan yönetilebilen, istenildiği zaman direk çağırılıp kullanılabilir bir yapı olarak redux kullanımı sistemin kompleksliğini azaltıyor. Gereksiz kod yazımını azaltıyor.

Neye benzer bu redux ?

Reudx Veri Akışı

Buyurun size redux’ın veri akışı. Aslına bakarsanız bu yaklaşım karışık, eğer basit bir site yapacaksanız, redux ile uğraşayım filen demeyin. Ciddi ciddi zaman harcarsınız sistemin kendi kompleksliği üzerinde. Dolayısı ile tercihler en iyi, en yeni teknolojiye göre değil, tercihler, ihtiyaca göre yapılması gereken kararlardır.

Akışta görüldüğü gibi, en basit bir butona tıkladığınızda bu buton bir action çağırması lazım, action middleware üzerinden dispatch işlemi yapıyor olması gerekli, bu aşamada yapılacak işlem yapılmalı, örneğin servisin şu methodunu şöyle çağır gibisinden, gelen veri reducer’lara yönlendirilmeli, store edilip, ilgili state güncellenmeli. State’in güncellemesini anlayan view katmanı kendini güncellemeli.

Yani eskiden visual basic, c# ile basit bir butonun click event’ini bağladığımız, gelen response göre ekranı düzenlediğimiz yapıdan çok uzak, çok daha kompleks bir yapı.

Apple’ın yeni Macbook’ları 10000 TL’ye değiyor mu, sorusunu redux için soralım, gerçekten kullanması değiyor mu ?

Konu tercihlerle ilişkili bir konu, eğer react dünyasının getirdiklerini standart bir yaklaşımla kullanmak isterseniz bence değiyor. En temelinde, bir developer’ın görmesi, öğrenmesi gerekli olan bir yaklaşım. Bir yandan oyuncak gibi. Alttaki video’u izlerseniz neden oyuncak gibi dediğimi anlayacaksınız.

Yepyeni bir yaklaşım getiriyor. Kullanıcının her bir aksiyonu state değişimine sebebiyet veriyor, bu belli bir standart halinde kayıt ediliyor. Dolayısı ile siz kullanıcının her bir hareketini step step gözlemleyebiliyor, oynatabiliyor, atlatabiliyorsunuz. Bu açıdan en temelinde yep yeni bir yaklaşım. Bu sebeple developer’lar tarafından öğrenilmesi gerekli diye düşünüyorum.

Redux yapısını kullanacaksanız, öncelikle Redux Dev Tool’un chrome extension’ı kurmanızı tavsiye ederim. Yukarda gördüğünüz videoda sağladığı veriyi bu extension developer’a sağlıyor. Development sürenizi ciddi anlamda hızlandıracak, stateleri, dispatch işlemlerini görmenizi sağlayacak.

Redux Dev Tool: https://github.com/zalmoxisus/redux-devtools-extension

Redux Dev Tool’un Arayüzü

Şimdi gelelim bu redux nasıl çalıştığını konuşmaya

Kullanıcı ile etkileşime girecek bir site yapacaksınız değil mi ? Hepimizin derdi bu. Örneğin login işlemi yapsın bu kullanıcı ya da about sayfasından hakkımızda yazısını okusun.

Hadi birlikte login işlemini yapması için gerekli olan redux yapısını kuralım.

  1. View

Ekranı yapmaya başlayalım. Kullanıcı username ve password’ünü gireceği ekranı düzenledik. İki tane inputbox koyduk. Bir tane submit buttonu. Bunu da react component’i olarak yaptık tabi.

Login ekranı componenti render fonksiyonu içi

View arayüzleri düzenlendi. Bununla birlikte form’un onSubmit işlemi sırasında çağırılacak fonksiyonda bu component içine yazılması gerekiyor.

onSubmit eventinde çağırılacak olan fonksiyon

Koddan görüldüğü gibi react’ın refs yapısı sayesinde DOM’un içindeki veri alınıp, action methodu çağırılıyor.

Güzel şu an işin view katmanını yaptık bile. Gelelim ikinci aşamaya, action tanımlamaya.

2. Action

Action’ları tuttuğumuz folder içinde yer alan ilgili action’ı manualLogin fonksiyonu ile çağırıyoruz.

manualLogin fonksiyonu view katmanından tetiklemeyi aldı ve işe öncelikle beginLogin methodunu dispatch ederek başladı. Aslında beginLogin methodu içersinde herhangi bir işlem yapmıyor. Ancak sisteme şu bilgiyi veriyor. Ben login doğrula işlemine başlıyorum, eğer bu çerçevede yapacak işleminiz varsa yapın diyor. Mesela ne yapılabilir? Ekranda loading resmi gösterilebilir değil mi.

BeginLogin sadece type verisi set edilmiş bir veriyi dispatch etmek. Kazanımı konuştuk.

İkinci adımda ise authService üzerinde login methodu çağırılıyor. Bu bildiğimiz klasik servis çağrısı yapmak. Veri olarak view ekranında hazırlanmış olan username ve password datası birleştirilmiş bir şekilde servise gönderiliyor.

Eğer login işlemi başarılı olursa sizinde gördüğünüz gibi aslında action içerisinde sadece yeni bir dispatch fonksiyonu çağırılıyor. Çağırılan fonksiyon loginSuccess(message). Bu method login işleminin başarılı bir şekilde yapıldığını tüm reducer’lara duyuruyor. Dikkat ederseniz bu dispatch işleminde message verisi de yandan alındı. Demek ki loginSuccess işleminin bağırdığı types.LOGIN_SUCCESS_USER tipini bekleyen reducer, type’ın yanında message verisi de bekliyor. Bu veriyi alıp ekranda kullanabiliriz. Login işlemi başarılı oldu ise yazabiliriz ekrana ya da servisten gelen hata mesajı: Kullanıcı adınız ya da şifreniz uyuşmadı gibi.

Action kısmını da anladık, bir sonraki adımımız action üzerinden dispatch edilenleri yakalayan reducer’larda.

3. Reducer

Üretmiş olduğunuz tüm reducer’ları combineReducers fonksiyonu kullanarak birleştiriyorsunuz. Bu şekilde herhangi birisi bir type’ı dispatch ederse tüm reducer’lara bu type ulaşıyor. Kim bu type’a ilişkin bir işlem yapıp elindeki state bilgisini güncellemek isterse action’ın type ile birlikte gelen datasını alıyor ve kullanıyor.

Biz login işlemi için konuşuyoruz, onun üzerinden devam edelim. Login işlemi başarılı olursa hangi type dispatch etmiştik, hatırlıyor musunuz? Ben cevaplıyım: types.LOGIN_SUCCESS_USER. Dolayısı ile login sonrası işlemin servisten OK dönmesini bekleyen ve ilgili state’ini değiştirmek isteyen tüm reducer’ların kendilerine yeni bir “case” oluşturmaları lazım.

Reducer’ın type tanımlama yapısı

Bu reducer authenticated state’i içinde 6 farklı type dinlediğini görüyoruz. Eğer LOGIN_SUCCESS_USER gelirse, şunu anlıyoruz ki kullanıcı username ve password’ünü girmiş, servise gitmiş ve backend’ten doğrulandı OK mesajını almış. Dolayısı ile client’a bu konuya ilişkin state bilgisi güncellenmeli ve viewler bundan haberdar olup kullanıcıya ilgili content’i göstermeli.

Burada yapılan işlem çok basit, eğer LOGIN_SUCCESS_USER geldi ise kullanıcı doğru username ve password girmiş, yani kullanıcı login olmuş. Dolayısı ile client’ta kullanıcın login olup olmadı bilgisini tutan state bilgisini true olarak işaretle diyoruz, aksi durumlarda ise, mesela LOGIN_ERROR_USER durumunda false olarak işaretle. Kullanıcı çünkü doğru kullanıcı adı ve şifreyi girmemiş.

Reducer yapısını da anladık, sırada ne var ? Sırada aslında başa döndü ve view geri geldik.

4. View Tekrar

Sen karıştırdın diyenler olabilir ancak yapı bu şekilde çalışıyor. Store dediğimiz kısım aslında tek bir mekanizma içinde state’leri barındırıyor. Dolayısı ile store’dan bahsedip kafa karıştırmadan atladık o kısmı, geldik view’a tekrar.

React’ın en güzel özelliği kendi virtual DOM yapısını kuruyor olması. Sizin ekranda her yaptığınız değişiklikte tüm DOM yenilenmiyor, sadece ilgili noktadaki DOM yenileniyor. Bu müthiş bir konu. Çünkü tüm DOM yenilendiğinde biz devamlı yenilen bir sayfa görüyoruz, gereksiz loading işlemi, sayfa yenilenmesi görüyoruz. Günümüzde en önemli şey hız, hız, hız. Dolayısı ile react’ın bu noktada nimeti olan virtual DOM’unu kullanacağız. Hem DOM içinde gezmektense virtual DOM içinde gezip ilgili noktayı bulmak çok daha hızlı.

React ile view katmanında input box’ları koyduğumuz render fonksiyonu burada kritik. Set ettiğimiz state değerlerinin reducer’lar tarafından güncellenmesi ile otomatikman tekrar view’ın ilgili yerlerini render ettiriyor. Gerçi bizim bu case’mizde bu şekilde olmuyor. Çünkü biz loginSuccess işlemini reducer’lara bildiriyoruz ancak sonrasında direk kullanıcıyı dispatch(push(‘/’)); fonksiyonu ile anasayfaya gönderiyoruz. Eğer kullanıcı aynı ekranda kalsaydı, react kalitesini gösterecek ve state’e bağlı olan tüm noktaları otomatik güncelleyecekti.

Eğer LOGIN_ERROR_USER dispatch edilmiş olsaydı, aynı ekranda kalacak ve ekranda yer alan message div’ini güncelleyecekti.

Bunu yapmak için props üzerinden message verisi alıyor olmamız lazım.

Props üzerinden action ile birlike gelen message datasının alınması.

Hazırlamış olduğumuz login view component’inin içinde yer alan message div bölgesine bunu tanımlıyor olmamız gerekiyor. Dolayısı ile eğer message güncellenir ise, bu div’in içindeki mesaj verisi de güncellenecek.

Login view ekranı message div’i
Redux Akışı

Şimdi bu akış tekrar bakalım. Biraz daha anlamlı gelmeye başladı mı ? Eğer gelebildi ise, anlatmak istediğimi bir noktada başarmışım demektir.

Yazıya ilişkin yorumlarınız varsa memnuniyetle duymak isterim. Bunun için alttaki yorum alanını kullanabilirsiniz.

Saygılarımla,

Doğan Aydın

Eklemek isterseniz:

Linkedin Profilim: https://www.linkedin.com/in/doganaydin/

GitHub Profilim: https://github.com/trda

Like what you read? Give Doğan Aydın a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.