Redux nedir

Bugun Yabadabadoo ile Redux ogreniyoruz.

Reduxun olayi bilgiyi nerede, ne formatta tuttugu degil. Redux bir felsefedir. Kod bakimindan pek onemsizdir, ve zaten birkac kb anca kaplamaktadir. Reduxun iyi yani, programi kolayca denetlenebilir yapmasi, buglardan korumasi ve zamanda geri yolculuk ozelligi.

Redux der ki, bir degiskenimiz var, buna store diyelim. Programdaki butun veri bu degiskenin icinde JSON formatinda saklanir. Yani, hangi sayfanin acik oldugu, ekranda gorunen butun yazismalar, butun resmler, yazilar store isimli objenin altinda saklanir.

Durum boyle olunca, herhangi bir anda programin verisine erisiminiz vardir. Diyelim 3 sn 23 ms once boslukta ne yaziyordu diye bakmak icin storeun o anki kopyasina bakabilirsiniz. Buna zamanda geri yolculuk deniyor. Redux dev tools kullanarak yaparsiniz.

Reduxun tanimladigi en onemli fonksiyonlar sunlar:

1. dispatch: veriyi degistirmek icin

2. getState: veriye erismek icin

Bu kadar basit. Bu haliyle cok çöp bir kutuphaneye benziyor, ama Reduxu redux yapan kisima gecmedik daha.

Reduxun felsefesi:

1. Butun veri tek bir degisken altinda saklanir. Bu ozelligiyle react in dagitilmis state akimina terstir. Bu yuzden redux kullaniyorsak reactin state ini hic ellemiyoruz.

2. Veriyi degistirmek icin belki fonisiyonlar tanimliyoruz. Ornegin mesaj geldiginde mesajlar dizisini guncellemek icin ( yeniMesaj, store ) => ( store ) imzali fonksiyon yaziyoruz. Bu fonksiyonlarin parametrelerinden biri hep storedur, ve cikti olarak hep storeun guncellenmis halini verir. Redux da o yeni storeu alir, eskisini siler, yenisini yerine koyar. Bu fonksiyonlara reduxça "reducer" diyoruz. Boylece, bugun hangi reducerden kaynakli oldugunu, zamanda yolculuk yaparak rahatça tespit edebiliriz.

3. Reducerleri direk tetiklemiyoruz. Yani reducer(...) seklinde cagirmiyoruz. Yerine dispatch kullaniyoruz. Dispatche parametre olarak her zaman bir obje atiyoruz. butun parametreler bu objenin icinde duracak. Reducerler de bu objeyi parametre seklinde alacak. Bu dispatchin icine koydugumuz objeye reduxça "action" diyoruz.

4.Her actionda olmasi gereken bir alan vardir. Bunun adi "type". Programda olacak her degisiklige isim koyuyoruz. Ornegin yeni mesaj geldiginde type: "yeni mesaj geldi" olabilir. Bir alana bir harf girildiginde "alan guncellendi" isimli bir type olabilir. 

Orn ali online olunca

dispatch( { type: "onlineOldu", kim: "ali" } )

Reducerimiz de su sekilde

( store, action) => {

if action.type = onlineOldu

store.onlineListesi [ action.kim ] = true

return store

}

 

Not: ustteki ornekte storeun uzerini direk degistiriyorum. Redux buna musaade etmez. Bu yuzden redux kullanacagimiz zaman Immer kutuphanesini, ya da EasyPeasy kutuphanesini kullaniyoruz.

 

Simdi, gordugumuz ozere redux reacttan tamamen bagimsiz bir kutuphanedir. Bu sekliyle her hangi bir framework yaninda kullanilabilir. Fakat, kimseyi kandirmayalim, reduxu kullanan cogu insan react kullaniyor. Reduxu react ile birlikte kullanmak icin "react-redux" kutuphanesini kullaniyoruz. Bu kutuphaneyi de soyle ozetleyelim:

- reduxtaki dispatch ve getState i muhtemelen componentlerin icinden cagiracagiz. Bu yuzden bu iki fonksiyonun component icinden cagirilabilir olmasini istiyoruz. Hatta mumkunse, getState yerine direk store a erismek istiyoruz. Bu kutuphane ile, birazdan gosterecegim yontemle dispatch ve store componente props.dispatch ve props.storeVerisi seklinde gelecek.

componentimizi yazdik, export ile disari verecegiz diyelim. export ile componentin kendisini degil de, degistirilmis bir versiyonunu disari verecegiz. Bunun icin connect fonksiyonu var.

connect fonksiyonu birazdan anlatacagim parametreleri alir, bir fonksiyon verir. Daha sonra bu fonksiyonu alip icine parametre olarak componentimizi koyup cagiriyoruz. Geri bu sefer degistirilmis component aliyoruz ve export ile gonderiyoruz.

connect parametre olarak 4 fonksiyon alir, bunlardan en onemlisi birinci parametre, digerlerini bos biraksak da olur. Bu fonksiyona react-reduxça "mapStateToProps" denir.

Bunun gorevi, store objesini propslara hangi isimle koymak istedigimizi belirtmemizdir. ( store ) => ( obje ) seklindedir. bu objenin alanlari, ayni isimle propsun icine aktarilir. Ornek kullanim

class Dugme ( .... ) { .... }

function mapstatetoprops (store) {

return { renk: store.butonRengi }

}

export connect(mapstatetoprops)(Dugme)

 

Tarih:
Hit: 6366
Yazar: yabadabadoo

Taglar: javascript react redux


Yorumlar


Yorum yapabilmek için üye girişi yapmalısınız.

Yorumlar

ayd tarafından yazıldı. Tarih: 17/Oca/20 00:20
Gorsel isteriz, emeğine sağlık.
yunusemre tarafından yazıldı. Tarih: 24/Tem/19 15:29
Ellerine sağlık hocam, devamını bekleriz 🙏
yabadabadoo tarafından yazıldı. Tarih: 23/Tem/19 01:33
Editlemeye yetkim yokmuş
end tarafından yazıldı. Tarih: 22/Tem/19 20:34
Görsellerle desteklenebilirse çok daha iyi olacaktır.