redux

• javascript icin bir state container aracidir. boyle tanimlayinca benim icin hicbir sey ifade etmiyor. daha iyi anlamak icin internette cesitli kaynaklara bakildiginda daha da kafa karistirici oluyor cunku "actions", "reducer", "store", "dispatch" derken farkli bir terminoloji ve bunun yaninda fonksiyonel programlama yaklasimi ile kafalar iyice karisiyor.
  
  redux konusuna gelmeden once ogrenmek ile ilgili bir durumu aciklamak isterim. kucuklugumden beri bazi konulari anlamakta gucluk cektim, ve bu yuzden bazen geri zekali oldugumu dusundum. ama zaman icinde benim gibi bircok kisi oldugunun farkina vardim ve kendime en uygun ogrenme seklinin ne oldugunu kendimce kesfettim. ben bir konuyu oldugu gibi ogrenemiyordum, mutlaka ogrendigim sey bir neden sonuc iliskisi icinde bir yere oturmaliydi. bu olmadiginda kafam basmiyor, idrak edemiyorum.
  
  redux konusu da bunlardan biri. ogrenirken terminoloji, kodlama gibi seyleri yapitorsun da kafamdan bir turlu "niye boyle yaziyoruz", "bu yazilan ne ise yariyor", "bunu yazmak zorunda miyiz" derken konsept bir turlu kafama oturmuyor.
  
  bu durumun icinden cikmak icin internette arastirma yapmak da cogu zaman bir faydali olmuyor. cunku kaynaklarin cogu redux nedir tanimini yaptiktan sonra redux ile ilgili kod nasil yazilir ona odaklaniyor. benim aradigim cevap ise asil "nasil ?" degil "neden ?" sorusunun cevabi. "neden redux gerekli", "ne oldu da redux hayatimiza girdi", "neden reduxa ihtiyac duyuyoruz".
  
  ıste bu yazida da onceden neredeydik, ve ne oldu da redux gibi bir teknolojiye ihtiyac oldu, bu surecte redux un react gibi frameworklerle iliskisi nedir anlatip daha sonra redux temel konseptini aciklayacagim. boylece ilk olarak "neden ?" sorusu cevabini bulacak, daha sonra "nasil ?" sorusunu aciklayacagim. tabi bunu anlatirken javascript nedir, dom nedir gibi temel konulari bildiginizi varsayiyorum.
  
  bu aciklamada kullandigim orneklerdeki kaynak redux resmi sitesi, bu site de tek basina incelendiginde "nasil" sorusunun cevabini verirken "neden" sorusunun cevabi gecistirilmis diger bircok yerde oldugu gibi. simdi ilk sorudan baslayalim;
  
  state container nedir?
  
  bunu anlamak icin once bir web sitesi icin state nedir onu anlamak lazim. state bir web sitesinin o anki durumudur. onceleri web gelistirme alaninda boyle bir tabir pek kullanilmiyordu. cunku web sitesinin state yani durumu ayni zamanda mevcut dom ile ayniydi. sayfada gordugumuz her sey o anki durumu ifade ediyor yani state ve dom birbirinden ayrilmiyordu.
  
  basit bir sekilde bu durumu soyle aciklayabilirim, ornegin sayfamizda bir buton dusunun. bu boton aktif yani enabled veya inaktif yani disabled durumda olabilir. daha onceleri bu butonun aktif mi ya da inaktif mi oldugunu bilmek ve ona gore islem yapmak icin o butonu dom uzerinde bulur, ve yine dom uzerinde o butonun attribute une bakar ve anlardik. yani butonun id, class, ve text, data gibi cesitli attributeler, hatta kendi belirledigimiz attributeler o butonu bulmak, ve o anki durumunu degistirmek icin kullaniliyordu.
  
  tabi zamanla asenkron web siteleri ile birlikte bu dom yapilari cok daha karmasik hale gelmeye basladi, dolayisi ile her seyi dom uzerine yazmak ve oradan kontrol etmek uygulamayi cok karisik hale getirdi. bunun icin cesitli convention lar konulsa da bu karmasaya fayda etmedi. ornegin bazi class tanimlari o objenin renk, sekil, pozisyon gibi durumlarini belirlemek icin kullanilirken, bazi class tanimlari o objenin javascript tarafta temsilcisi oldular. zamanla dom uzerindeki her seyin bir sekilde javascript tarafinda bir kopyasi olusturulmak zorunda kalindi. ayrica bir butonun durumunda en kucuk degisiklik yapmak gerektiginde bu javascript objesi degistirildi, bunun uzerine bir de bir javascript fonksiyonu ile o butona ait dom objesi bulunmak, sonra uygun attribute bulunup, dom uzerinde de gerekli degisikli yapilmak zorunda kalindi. yani kisaca hem javascript uzerindeki state, hem de dom uzerindeki state bir sekilde senkronize edilmeli, tek bir olay icin iki farkli is yapilmak durumunda kalindi.
  
  buna alternatif olarak react, angular, vue gibi frameworkler bize kolaylik sundular. bunlarin temelde yaptigi javascript objesi ile dom arasindaki senkronizasyonu saglamak, ayni zamanda da bize guvenilir bir yapi sunmak. butonun mevcut durumunu javascript tarafta degistirdigimizde dom uzerinde yapilacak gerekli isi, senkronizasyonu bu frameworkler yapiyorlar. yani artik javascript tarafta isbuttonenabled diye bir property tanimlayip onu basit bir sekilde enable veya disable yapip, daha sonra bunun sonuncunda dom a kadar gidecek olan zincirleme aksiyonu bu farmeworklere birakmis olduk. bunlar isin arkasinda gerekli olan render, veya bu render isleminin zamanlamasini, ya da neyin tekrardan render yapilip yapilmayacagini kontrol ediyorlar, bizim yerimize cozuyorlar.
  
  ozetle sayfamizin o anki durumunu, hangi kutu acik, kullanici login oldu mu, oldu ise hangi kullanici, sayfada o anda goruntulenen veriler neler hepsini minimum buyuklukte bir javascript objesinde yani state de tutuluyor. minimum buyukluk diyorum cunku bu objede sadece degisken seyler tutuluyor. ornegin o butonun rengi sayfanin her yerinde ayni ise bu bir sabit oldugu icin state objesinde tutulmasi gerekmiyor. ozetle sayfada degisikenlik gosteren her sey bir state iken, degismeyen seyler state olarak tutulmuyor. ornegin bir butonun o an disable veya enable olup olmamasi bir state iken rengi, pozisyonu degismiyor ise state olarak tutulmuyor. state sayfamizin kucuk bir ozeti gibi birsey.
  
  redux nedir, ne ise yarar ?
  
  state degisikligi sonunda dom uzerinde yapilacak isler bu frameworklere devredildi ama artik state de buyudu ve karmasik hale geldi. iste bu durumda da state objesini yonetmek icin araclar cikti, bunlardan biri de redux.
  
  redux daha cok react projelerinde kullanilsa da aslinda herhangi bir projede kullanilabilr. react ise bu state yonetim araci ile dom arasindaki baglantiyi kuruyor.
  
  redux in asil kullanim motivasyonu state objesini minimum stateful sekilde fonksiyonel programlama paradigmasina gore, test edilebilir ve yan etkilerin minimize edilmesinden dolayi daha saglam bir yapi ortaya koymaktir.
  
  redux bizim uygulamamamizin o anlik durumunu en kucuk hali ile tutan bir state makinasidir. yani redux da olasi tum olaylar yani actions tanimlaniyor, daha sonra bu aksiyonlarin gerceklesmesinin bizim state uzrinde ne gibi degisilik yaptigi tanimlaniyor reducers. state uzerinde yapilacak degisiklikleri belli kurallara bagliyor. bu reducerlar da dispatch diye ifade edilen tetikleyiciler ile calistiriliyor.
  
  yani sayfadaki bir butonun enable yada disable olmasi gibi tum olaylar 'action', bir butonun enable ya da disable olmasini saglayan state objesi uzerindeki degisikligi yapan fonksiyonlar reducer, bu reducerlari tetikleyen emirler isedispatch.
  
  actions nedir ?
  
  sayfadaki tum olaylari tanimladigimiz javascript object
  ornegin bir todo list dusun;
  - yeni bir satir eklenebilir
  - mevcut satir status toggle yapilabilir, yani completed | uncomplated gibi
  - liste belli bir kritere gore filtrelenebilir.
  
  bunlar bizim olasi aksiyonlarimiz.
  
  nasildir bu action formati ?
  
  basit bir js object
  
  {
  type: key_strıng,
  payload
  }
  
  bu formatta type zorunluluk, unique string olmali.
  payload olarak da istedigimizi tanimlayabiliriz.
  ornegin yeni eklemek istedigimiz satir icin bu bir 'text' olabilir,
  ya da toggle yapmak istedigimiz satir icin 'id' olabilir
  ya da filter yapmak istedigimiz liste icin 'filter' olabilir.
  
  action creator nedir?
  
  actionlar tek basina kullanisli degildir. her bir action icin type ayni kalsa da payload hep degisir. ornegin toggle yapmak istedigimiz todo item icin id hep degisecektir. o nedenle actionlar dinamik olarak uretilmeli.
  
  yani bir fonksiyon ile o fonksiyona bir payload gondermeliyiz, o fonksiyon da bize type hep sabit kalmakla beraber dinamik bir payload gondermeli.
  
  addtodo = text => { type: 'add_todo', text};
  
  toggletodo = id => { type: 'toggle_todo', id};
  
  filtertodo = filter => { type: 'fılter_todo', filter};
  
  yani ozetle action creator basit bir fonksiyon ve bize dinamik olarak action donuyor.
  
  reducer nedir?
  
  reducer ismi array.reduce dan geliyor. bu fonksiyona gonderdigimiz higher order fonksiyona da reducer deniliyor.
  
  ne yapiyor bu reducer? array icindek her bir elemani teker teker bu reducer fonksiyonu cagiriyor, ama cagirirken hem bir onceki reducer fonksiyonunun gonderdigi elemeani hem de mevcut elemani gonderiyor. ornegin;
  
  const arr = [1,2,3,4];
  arr.reduce( (accumulator, value) => {
  // artik burada ne yaparsan
  // ornegin bir onceki deger ile bir simdikini toplarsan
  return accumulator + value;
  // return degeri bir sonraki reducer fonksiyonuna accumulator olarak gider
  });
  
  redux daki reducer da benzer sey yapiyor. onceki state ve aksiyonu aliyor, ve bundan yeni bir state olusturup donuyor.
  
  bu sekilde bir state sahibi olalim;
  
  {
  filter: 'foo',
  todos: [
  {
  text: 'bar',
  completed: false
  }
  ]
  }
  
  yani reducer bir pure function, state manipulasyon icin kullaniliyor.
  
  function todoapp (state = initialstate, action){
  switch(action.type) {
  case add_todo:
  case toggle_todo:
  case fılter_todo:
  default:
  return state;
  }
  }
  
  tabi reducer ilk calistiginda accumulator yani redux da state undefined olarak geliyor. dolayisi ile ilk reducer calistiginda bir initial state donmek gerkiyor ki bu initial state bir sonraki reducerda mevcut state olsun.
  
  reducer ile ilgili en onemli konu reducerlar pure function olmali. yani asla icinde bir state barindirmamali, asla `math.random()veyadate.now()` gibi fonksiyonlar kullanilmamali. ve cok onemli kendisine gelen state objesini asla degistirmemeli, yeni bir obje yaratip donmeli.
  
  function todoapp (state = initialstate, action){
  switch(action.type) {
  case add_todo:
  return object.assign({}, state, {
  todos: [...state.todos, { text: action.text, completed: false}]
  });
  case toggle_todo:
  // find item and change and assign new object
  case fılter_todo:
  return object.assign({}, state, { visibilityfilter: action.filter});
  default:
  return state;
  }
  }
  
  store nedir ?
  
  store tum bu elementleri bir araya getirmek icin kullanilir ve her bir redux uygulamasi sadece bir store sahibi olur. store olusturmak icin createstore fonksiyonu cagirilmalidir, ve bu fonksiyon main reducer objesini parametere olarak alir. ayrica ekstradan bir de init state de store a gonderilebilir.
  
  import { createstore } from 'redux'
  import todoapp from './reducers'
  const store = createstore(todoapp)
  
  ayira state store yaratirken initia state de tanimlayabilirs;
  
  const store = createstore(todoapp, window.state_from_server)
  
  dispatch nedir?
  
  simdi elimizde store, store icine gonderilmis reducer, reducerlarda kullanilmak uzere action var. artik actionlar tetiklenmeli, dolayisi ile o actiona uygun reducer calismali ve state degismeli. bunin icin dispatch kullaniliyor.
  
  import {
  addtodo,
  toggletodo,
  setvisibilityfilter,
  visibilityfilters
  } from './actions'
  
  // log the initial state
  console.log(store.getstate())
  
  // dispatch some actions
  store.dispatch(addtodo('learn about actions'))
  store.dispatch(addtodo('learn about reducers'))
  store.dispatch(addtodo('learn about store'))
  store.dispatch(toggletodo(0))
  store.dispatch(toggletodo(1))
  store.dispatch(setvisibilityfilter(visibilityfilters.show_completed))
  
  bu ornekte actionlar import ediliyor, ayni actionlar reducerda da kullaniyor. yani reducer ve dispatch aksiyonun arasindaki baglanti bu action tanimlamalari yani action.type. cunku dispatch da belirttigimiz action, reducer icinde kullanilan switch tarafindan kontrol edilip ona gore uygun reducer fonksiyon calisiyor.
  
  subscribe nedir?
  
  bir state degistiginde o state degisikligini dinlemek yani state degistiginde bir fonksiyon cagirilsin istersek o store icin subscribe yapiyoruz.
  
  const unsubscribe = store.subscribe(() => console.log(store.getstate()))
  
  subscribe fonksiyonu bir unsubscribe fonksiyonu donuyor ve bu fonksioynu kullanarak da unsubscribe yapabiliriz.
  
  unscubscribe();
  
  basta da dedigim gibi burada kullanidigim ornekler redux resmi sitesinden alinda, ama ben ek olarak "nasil" sorusunun yaninda "neden" sorusunu da aciklamaya calisttim.