Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve verimlili\u011fi art\u0131rmak i\u00e7in s\u00fcrekli olarak sunucuyla ileti\u015fim kurar. Kullan\u0131c\u0131 verilerini \u00e7ekmek, form g\u00f6ndermek, dosya y\u00fcklemek veya anl\u0131k bildirimler almak gibi i\u015flemlerin tamam\u0131 asenkron olarak ger\u00e7ekle\u015fir. Bu t\u00fcr i\u015flemler, uygulaman\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) bloke etmeden arka planda y\u00fcr\u00fct\u00fcl\u00fcr, b\u00f6ylece kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) donmaz ve ak\u0131c\u0131 bir deneyim sunulur.<\/p>\n
React uygulamalar\u0131nda durum y\u00f6netimini merkezi ve \u00f6ng\u00f6r\u00fclebilir bir \u015fekilde sa\u011flamak i\u00e7in Redux gibi k\u00fct\u00fcphaneler yayg\u0131n olarak kullan\u0131l\u0131r. Redux, uygulaman\u0131n t\u00fcm durumunu tek bir yerde (store) tutan, bu durumu yaln\u0131zca saf (pure) fonksiyonlar (indirgeyiciler\/reducers) arac\u0131l\u0131\u011f\u0131yla ve yaln\u0131zca eylemler (actions) ile de\u011fi\u015ftirilebilen bir mimari sunar. Bu prensipler, uygulaman\u0131n durumunu takip etmeyi, hatalar\u0131 ay\u0131klamay\u0131 ve test etmeyi kolayla\u015ft\u0131r\u0131r. Ancak Redux’\u0131n bu temel prensipleri, asenkron i\u015flemlerle do\u011fal olarak \u00e7eli\u015fir.<\/p>\n
Redux’\u0131n indirgeyicileri, verilen bir durum ve eylem i\u00e7in her zaman ayn\u0131 \u00e7\u0131kt\u0131y\u0131 \u00fcretmeli ve herhangi bir yan etki (side effect) i\u00e7ermemelidir. Yan etkiler, bir fonksiyonun d\u0131\u015f d\u00fcnyay\u0131 etkilemesi veya d\u0131\u015f d\u00fcnyadan etkilenmesi anlam\u0131na gelir; \u00f6rne\u011fin bir API \u00e7a\u011fr\u0131s\u0131 yapmak, bir zamanlay\u0131c\u0131 ayarlamak veya konsola \u00e7\u0131kt\u0131 yazmak gibi. Asenkron i\u015flemler do\u011fas\u0131 gere\u011fi yan etkiler i\u00e7erir ve bu nedenle do\u011frudan indirgeyiciler i\u00e7inde ele al\u0131namazlar. Eylemlerin ise sadece durumu tan\u0131mlayan d\u00fcz JavaScript nesneleri olmas\u0131 beklenir. Peki, bir API \u00e7a\u011fr\u0131s\u0131 gibi zaman al\u0131c\u0131 bir i\u015flemi Redux ak\u0131\u015f\u0131na nas\u0131l entegre edebiliriz? \u0130\u015fte bu noktada Redux middleware’leri ve \u00f6zellikle Redux Thunk devreye girer. Redux Thunk, Redux’\u0131n asenkron i\u015flemleri y\u00f6netme yetene\u011fini art\u0131ran basit ama g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bu makalede, Redux Thunk’\u0131n ne oldu\u011funu, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve asenkron Redux eylemlerini anlamak ve uygulamak i\u00e7in neden bu kadar \u00f6nemli oldu\u011funu detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
Redux’\u0131n temelini olu\u015fturan senkron eylem ak\u0131\u015f\u0131n\u0131 anlamak, asenkron eylemlerin neden \u00f6zel bir yakla\u015f\u0131ma ihtiya\u00e7 duydu\u011funu kavramak i\u00e7in kritik \u00f6neme sahiptir. Redux’ta, uygulaman\u0131n durumunu de\u011fi\u015ftirmek istedi\u011finizde a\u015fa\u011f\u0131daki ad\u0131mlar izlenir:<\/p>\n
1. Eylem Yarat\u0131c\u0131s\u0131 (Action Creator)<\/strong>: Durumda bir de\u011fi\u015fiklik niyetini ifade eden bir fonksiyon tan\u0131mlars\u0131n\u0131z. Bu fonksiyon, bir “eylem” nesnesi d\u00f6nd\u00fcr\u00fcr.<\/p>\n Burada Bu, yukar\u0131daki eylem yarat\u0131c\u0131s\u0131n\u0131n d\u00f6nd\u00fcrd\u00fc\u011f\u00fc eylem nesnesidir. Bu \u00e7a\u011fr\u0131, eylemi Redux ak\u0131\u015f\u0131na sokar. 5. Yeni Durum (New State)<\/strong>: \u0130ndirgeyiciler yeni durumu d\u00f6nd\u00fcrd\u00fc\u011f\u00fcnde, Redux store’u g\u00fcncellenir. Bu g\u00fcncelleme, Redux’a ba\u011fl\u0131 t\u00fcm bile\u015fenlerin (\u00f6rne\u011fin React bile\u015fenleri Bu ak\u0131\u015f tamamen senkrondur ve her ad\u0131m an\u0131nda ger\u00e7ekle\u015fir. Eylem nesnesi olu\u015fturulur, g\u00f6nderilir, indirgeyici taraf\u0131ndan i\u015flenir ve durum g\u00fcncellenir; bunlar\u0131n hepsi tek bir olay d\u00f6ng\u00fcs\u00fc i\u00e7inde tamamlan\u0131r.<\/p>\n Redux’\u0131n temel prensipleri, uygulaman\u0131n durumunu \u00f6ng\u00f6r\u00fclebilir ve izlenebilir k\u0131lmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Ancak bu prensipler, asenkron i\u015flemlerle kar\u015f\u0131la\u015f\u0131ld\u0131\u011f\u0131nda do\u011fal zorluklar yarat\u0131r:<\/p>\n 1. \u0130ndirgeyicilerin Safl\u0131\u011f\u0131 (Purity of Reducers)<\/strong>: Redux’\u0131n en temel kurallar\u0131ndan biri, indirgeyicilerin saf fonksiyonlar olmas\u0131d\u0131r. Saf fonksiyonlar: Bir API \u00e7a\u011fr\u0131s\u0131 yapmak, bir 2. Eylemlerin D\u00fcz Nesneler Olmas\u0131 Gereklili\u011fi<\/strong>: Redux’ta, Bir API \u00e7a\u011fr\u0131s\u0131 gibi asenkron bir i\u015flemi temsil eden bir eylemin d\u00fcz bir nesne olmas\u0131 m\u00fcmk\u00fcn de\u011fildir. Bir API \u00e7a\u011fr\u0131s\u0131, iste\u011fi ba\u015flatma, veriyi bekleme ve ba\u015far\u0131l\u0131 veya ba\u015far\u0131s\u0131z olma gibi birden fazla a\u015famadan ge\u00e7er. Bu a\u015famalar\u0131n her biri farkl\u0131 bir durumu veya olay\u0131 temsil eder ve tek bir d\u00fcz nesneyle ifade edilemez.<\/p>\n Problem \u00d6zeti<\/strong>: Bir kullan\u0131c\u0131 listesini sunucudan \u00e7ekmek istedi\u011fimizi varsayal\u0131m. Bu i\u015flem \u015fu ad\u0131mlar\u0131 i\u00e7erecektir: Bu ad\u0131mlar\u0131n her biri, farkl\u0131 bir Redux eylemi gerektirebilir ( Redux’ta asenkron i\u015flemlerin ve di\u011fer yan etkilerin y\u00f6netilmesi i\u00e7in kullan\u0131lan temel mekanizma “middleware”dir. Middleware, Redux’\u0131n Middleware Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/strong><\/p>\n Redux’\u0131n Bir middleware’in yap\u0131s\u0131 genellikle \u015fu \u015fekildedir:<\/p>\n * Bu yap\u0131 sayesinde middleware’ler, Redux’\u0131n tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131n\u0131 bozmadan, eylemleri yakalayabilir ve yan etkileri y\u00f6netebilir. Asenkron i\u015flemler i\u00e7in Redux Thunk gibi middleware’ler, eylem yarat\u0131c\u0131lar\u0131n\u0131n d\u00fcz nesneler yerine fonksiyonlar d\u00f6nd\u00fcrmesine izin vererek bu k\u00f6pr\u00fc g\u00f6revini \u00fcstlenir.<\/p>\n Redux Thunk, Redux i\u00e7in en pop\u00fcler ve en basit middleware’lerden biridir. Temel amac\u0131, Redux’\u0131n asenkron i\u015flemleri do\u011fal bir \u015fekilde y\u00f6netmesini sa\u011flamakt\u0131r. Bunu, eylem yarat\u0131c\u0131lar\u0131n\u0131n d\u00fcz JavaScript nesneleri d\u00f6nd\u00fcrmek yerine fonksiyonlar<\/em> d\u00f6nd\u00fcrmesine izin vererek yapar.<\/p>\n Thunk Nedir?<\/strong><\/p>\n Bilgisayar biliminde “thunk”, bir hesaplamay\u0131 erteleyen bir fonksiyonu ifade eder. Yani, bir fonksiyonun de\u011ferini hemen hesaplamak yerine, bu de\u011feri hesaplayacak bir fonksiyon d\u00f6nd\u00fcr\u00fcrs\u00fcn\u00fcz. De\u011fer, bu d\u00f6nd\u00fcr\u00fclen fonksiyon \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda hesaplan\u0131r. Redux Thunk ba\u011flam\u0131nda, bu, bir eylemi hemen Redux Thunk Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/strong><\/p>\n Redux Thunk middleware’i, Bu mekanizma, thunk fonksiyonunun i\u00e7inde yan etkileri (API \u00e7a\u011fr\u0131lar\u0131, zamanlay\u0131c\u0131lar vb.) g\u00fcvenle ger\u00e7ekle\u015ftirmesine ve bu yan etkilerin sonucuna g\u00f6re Redux store’unu g\u00fcncellemek i\u00e7in birden fazla eylemi Neden G\u00fc\u00e7l\u00fc?<\/strong><\/p>\n * Yan Etkileri Y\u00f6netme<\/strong>: Thunk i\u00e7inde API \u00e7a\u011fr\u0131lar\u0131 gibi yan etkileri g\u00fcvenle ger\u00e7ekle\u015ftirebilirsiniz. Redux Thunk’\u0131 bir Redux projesine entegre etmek ve kullanmak olduk\u00e7a basittir. \u0130\u015fte ad\u0131m ad\u0131m bir rehber:<\/p>\n \u00d6ncelikle Redux Thunk paketini projenize kurman\u0131z gerekir:<\/p>\n Redux Thunk’\u0131 kullanabilmek i\u00e7in, onu Redux store’unuza bir middleware olarak uygulaman\u0131z gerekir. Bu i\u015flem genellikle Geleneksel Redux ile:<\/strong><\/p>\n Redux Toolkit ile (\u00d6nerilen):<\/strong><\/p>\n Redux Toolkit, Redux uygulamalar\u0131n\u0131 daha kolay ve verimli hale getirmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. \u015eimdi, bir API’den kullan\u0131c\u0131 verisi \u00e7eken asenkron bir Redux eylemi olu\u015ftural\u0131m. Bu i\u015flem genellikle \u00fc\u00e7 farkl\u0131 durumu i\u00e7erir: iste\u011fin ba\u015flamas\u0131, iste\u011fin ba\u015far\u0131yla tamamlanmas\u0131 ve iste\u011fin ba\u015far\u0131s\u0131z olmas\u0131. Bu durumlar\u0131n her birini ele almak i\u00e7in farkl\u0131 eylem tipleri tan\u0131mlayaca\u011f\u0131z.<\/p>\n a. Eylem Tipleri (Action Types)<\/strong><\/p>\n b. \u0130ndirgeyici (Reducer)<\/strong><\/p>\n Bu eylem tiplerini ele alacak bir indirgeyiciye ihtiyac\u0131m\u0131z var. Bu indirgeyici, kullan\u0131c\u0131 verilerini, y\u00fckleme durumunu ve hata mesajlar\u0131n\u0131 store’da tutacakt\u0131r.<\/p>\n c. Asenkron Eylem Yarat\u0131c\u0131s\u0131 (Thunk Action Creator)<\/strong><\/p>\n \u015eimdi as\u0131l Redux Thunk fonksiyonumuzu yazal\u0131m. Bu fonksiyon, bir API \u00e7a\u011fr\u0131s\u0131 yapacak ve duruma g\u00f6re ilgili eylemleri A\u00e7\u0131klama:<\/strong> Son olarak, bu thunk eylemini bir React bile\u015feni i\u00e7inden nas\u0131l \u00e7a\u011f\u0131raca\u011f\u0131m\u0131z\u0131 g\u00f6relim. Bu \u00f6rnek, Redux Thunk’\u0131n asenkron bir API \u00e7a\u011fr\u0131s\u0131n\u0131 Redux ak\u0131\u015f\u0131na nas\u0131l sorunsuz bir \u015fekilde entegre etti\u011fini g\u00f6stermektedir. Kullan\u0131c\u0131 aray\u00fcz\u00fc, y\u00fckleme, ba\u015far\u0131 ve hata durumlar\u0131n\u0131 store’daki duruma g\u00f6re dinamik olarak g\u00fcnceller.<\/p>\n Redux Thunk’\u0131n temel kullan\u0131m\u0131 basit olsa da, daha karma\u015f\u0131k senaryolar i\u00e7in baz\u0131 ileri desenler ve en iyi uygulamalar mevcuttur.<\/p>\n Thunk fonksiyonlar\u0131, \u00d6rnek: Veri Tekrar \u00c7ekmeyi Engelleme<\/strong><\/p>\n Diyelim ki bir kullan\u0131c\u0131n\u0131n verilerini \u00e7ekmek istiyorsunuz, ancak bu veriler zaten store’da mevcutsa API \u00e7a\u011fr\u0131s\u0131 yapmaktan ka\u00e7\u0131nmak istiyorsunuz.<\/p>\n Bu desen, gereksiz a\u011f isteklerini \u00f6nleyerek uygulaman\u0131z\u0131n performans\u0131n\u0131 art\u0131rabilir.<\/p>\n Bir thunk i\u00e7inde ba\u015fka bir thunk’\u0131 \u00d6rnek: Kullan\u0131c\u0131 Olu\u015fturma ve Ard\u0131ndan T\u00fcm Kullan\u0131c\u0131lar\u0131 Yeniden \u00c7ekme<\/strong><\/p>\n Bu desen, bir i\u015flemin tamamlanmas\u0131n\u0131n ard\u0131ndan ba\u015fka bir i\u015flemin tetiklenmesini sa\u011flar.<\/p>\n B\u00fcy\u00fck uygulamalarda, eylem tiplerini, eylem yarat\u0131c\u0131lar\u0131n\u0131 ve thunk’lar\u0131 mant\u0131ksal olarak d\u00fczenlemek \u00f6nemlidir. Genellikle her \u00f6zellik alan\u0131 (feature) i\u00e7in ayr\u0131 bir klas\u00f6r olu\u015fturulur ve i\u00e7inde Redux Toolkit ile bu organizasyon genellikle Thunk’lar\u0131 test etmek, i\u00e7erdikleri asenkron mant\u0131k nedeniyle normal eylem yarat\u0131c\u0131lar\u0131ndan biraz daha karma\u015f\u0131k olabilir. Ancak, Bu testler, thunk’\u0131n beklenen eylemleri do\u011fru zamanlarda ve do\u011fru verilerle Redux ekosisteminde asenkron i\u015flemleri y\u00f6netmek i\u00e7in Redux Thunk’tan ba\u015fka g\u00fc\u00e7l\u00fc middleware’ler de bulunmaktad\u0131r. En pop\u00fcler alternatifler Redux Saga ve Redux Observable’d\u0131r.<\/p>\n * Redux Saga<\/strong>: Generator fonksiyonlar\u0131n\u0131 (ES6) kullanarak yan etkileri y\u00f6neten bir middleware’dir. Saga’lar, daha bildirimsel bir yakla\u015f\u0131mla karma\u015f\u0131k asenkron i\u015f ak\u0131\u015flar\u0131n\u0131 tan\u0131mlaman\u0131za olanak tan\u0131r. \u0130\u015flemleri iptal etme, e\u015fzamanl\u0131l\u0131k kontrol\u00fc ve daha karma\u015f\u0131k durumlar i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar sunar. \u00d6\u011frenme e\u011frisi Thunk’a g\u00f6re daha diktir, ancak b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda daha iyi bir yap\u0131land\u0131rma ve test edilebilirlik sa\u011flayabilir.<\/p>\n * Redux Observable<\/strong>: RxJS (Reactive Extensions for JavaScript) k\u00fct\u00fcphanesini temel alan bir middleware’dir. Ak\u0131\u015f tabanl\u0131 (stream-based) bir yakla\u015f\u0131mla asenkron i\u015flemleri ve yan etkileri y\u00f6netir. RxJS’in g\u00fc\u00e7l\u00fc operat\u00f6rleri sayesinde, olaylar\u0131n zaman i\u00e7indeki ak\u0131\u015f\u0131n\u0131 manip\u00fcle etmek ve d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in \u00e7ok esnek bir yol sunar. Reaktif programlamaya a\u015fina olanlar i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r, ancak RxJS’in \u00f6\u011frenilmesi de ayr\u0131 bir \u00e7aba gerektirir.<\/p>\n Neden Redux Thunk Hala Pop\u00fcler?<\/strong><\/p>\n Redux Thunk, basitli\u011fi, hafifli\u011fi ve do\u011frudan JavaScript’in yerle\u015fik asenkron \u00f6zelliklerini (Promise’ler, Her ara\u00e7 gibi, Redux Thunk’\u0131n da kendi avantajlar\u0131 ve dezavantajlar\u0131 vard\u0131r.<\/p>\n 1. Basit ve Hafif<\/strong>: Redux Thunk’\u0131n kod taban\u0131 olduk\u00e7a k\u00fc\u00e7\u00fckt\u00fcr ve kavramsal olarak anla\u015f\u0131lmas\u0131 kolayd\u0131r. Redux’a yeni ba\u015flayanlar i\u00e7in ideal bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. 1. Karma\u015f\u0131k Mant\u0131k Birikimi<\/strong>: \u00c7ok karma\u015f\u0131k asenkron ak\u0131\u015flar veya birden fazla ba\u011f\u0131ml\u0131 API \u00e7a\u011fr\u0131s\u0131 i\u00e7eren senaryolarda, thunk fonksiyonlar\u0131n\u0131n i\u00e7inde \u00e7ok fazla mant\u0131k birikebilir. Bu, thunk’lar\u0131n okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 zorla\u015ft\u0131rabilir (“callback hell” benzeri bir durum). Redux Thunk, Redux uygulamalar\u0131nda asenkron i\u015flemleri y\u00f6netmek i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r. Redux’\u0131n indirgeyicilerin safl\u0131\u011f\u0131 ve eylemlerin d\u00fcz nesneler olmas\u0131 gibi temel prensipleriyle asenkronlu\u011fun do\u011fas\u0131ndaki yan etkiler aras\u0131ndaki bo\u015flu\u011fu doldurur. Eylem yarat\u0131c\u0131lar\u0131n\u0131n d\u00fcz nesneler yerine fonksiyonlar d\u00f6nd\u00fcrmesine izin vererek, bu fonksiyonlar\u0131n i\u00e7inde API \u00e7a\u011fr\u0131lar\u0131 yapma, birden fazla eylem Kurulumu ve kullan\u0131m\u0131 kolay olmas\u0131, d\u00fc\u015f\u00fck \u00f6\u011frenme e\u011frisi sunmas\u0131 ve JavaScript’in yerle\u015fik asenkron mekanizmalar\u0131n\u0131 kullanmas\u0131 nedeniyle Redux Thunk, \u00f6zellikle k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projeler i\u00e7in pop\u00fcler bir tercih olmaya devam etmektedir. Redux Toolkit’in varsay\u0131lan olarak Thunk’\u0131 i\u00e7ermesi, onun Redux ekosistemindeki merkezi rol\u00fcn\u00fc daha da peki\u015ftirmektedir.<\/p>\n Ancak, \u00e7ok karma\u015f\u0131k asenkron i\u015f ak\u0131\u015flar\u0131, iptal edilebilir i\u015flemler veya y\u00fcksek d\u00fczeyde e\u015fzamanl\u0131l\u0131k gerektiren durumlarla kar\u015f\u0131la\u015f\u0131ld\u0131\u011f\u0131nda, Redux Saga veya Redux Observable gibi daha g\u00fc\u00e7l\u00fc ve bildirimsel alternatifler de\u011ferlendirilebilir. Yine de, \u00e7o\u011fu Redux uygulamas\u0131 i\u00e7in Redux Thunk, asenkron eylemleri temiz, \u00f6ng\u00f6r\u00fclebilir ve y\u00f6netilebilir bir \u015fekilde ele almak i\u00e7in yeterli ve etkili bir \u00e7\u00f6z\u00fcmd\u00fcr. Redux Thunk’\u0131 anlamak ve ustaca kullanmak, modern Redux tabanl\u0131 uygulamalar geli\u015ftiren her geli\u015ftirici i\u00e7in temel bir beceridir.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Redux Thunk ile Asenkron Redux Eylemlerini Anlamak\nGiri\u015f: Redux ve Asenkronlu\u011fun Zorunlulu\u011fu\nModern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zen","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-34704","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nfunction incrementCounter() {\n return {\n type: 'INCREMENT',\n payload: 1\n };\n }<\/code><\/pre>\nincrementCounter<\/code> bir eylem yarat\u0131c\u0131s\u0131d\u0131r.
\n2. Eylem (Action)<\/strong>: Eylem yarat\u0131c\u0131s\u0131n\u0131n d\u00f6nd\u00fcrd\u00fc\u011f\u00fc, type<\/code> \u00f6zelli\u011fine sahip d\u00fcz bir JavaScript nesnesidir. type<\/code> \u00f6zelli\u011fi, hangi t\u00fcr de\u011fi\u015fikli\u011fin yap\u0131laca\u011f\u0131n\u0131 belirtir. Genellikle payload<\/code> gibi ek veriler de i\u00e7erebilir.<\/p>\n{ type: 'INCREMENT', payload: 1 }<\/code><\/pre>\n
\n3. dispatch<\/code> Fonksiyonu<\/strong>: Bir bile\u015fenden veya ba\u015fka bir yerden, bu eylem nesnesini Redux store’una g\u00f6ndermek i\u00e7in store.dispatch()<\/code> fonksiyonunu \u00e7a\u011f\u0131r\u0131rs\u0131n\u0131z.<\/p>\nstore.dispatch(incrementCounter());<\/code><\/pre>\n
\n4. \u0130ndirgeyici (Reducer)<\/strong>: Redux store’u, kendisine g\u00f6nderilen eylemi al\u0131r ve bu eylemi t\u00fcm kay\u0131tl\u0131 indirgeyicilere iletir. Her indirgeyici, uygulaman\u0131n belirli bir b\u00f6l\u00fcm\u00fcn\u00fcn durumunu y\u00f6netir. Bir indirgeyici, mevcut durumu ve eylemi girdi olarak al\u0131r ve eyleme g\u00f6re yeni bir durum nesnesi<\/em> d\u00f6nd\u00fcr\u00fcr. \u0130ndirgeyiciler saf fonksiyonlar olmal\u0131d\u0131r; yani yan etki i\u00e7ermemeli, do\u011frudan durumu de\u011fi\u015ftirmemeli (immutable olmal\u0131) ve her zaman ayn\u0131 girdi i\u00e7in ayn\u0131 \u00e7\u0131kt\u0131y\u0131 \u00fcretmelidir.<\/p>\nfunction counterReducer(state = { count: 0 }, action) {\n switch (action.type) {\n case 'INCREMENT':\n return { ...state, count: state.count + action.payload };\n case 'DECREMENT':\n return { ...state, count: state.count - action.payload };\n default:\n return state;\n }\n }<\/code><\/pre>\nuseSelector<\/code> hook’u ile) yeniden render edilmesine neden olabilir, b\u00f6ylece UI yeni durumu yans\u0131t\u0131r.<\/p>\nRedux’ta Asenkronlu\u011fun Zorluklar\u0131<\/h3>\n
\n * Ayn\u0131 girdilerle \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda her zaman ayn\u0131 \u00e7\u0131kt\u0131y\u0131 \u00fcretirler.
\n * D\u0131\u015f d\u00fcnyay\u0131 etkileyen veya d\u0131\u015f d\u00fcnyadan etkilenen herhangi bir yan etki (side effect) i\u00e7ermezler.
\n * Girdilerini do\u011frudan de\u011fi\u015ftirmezler (immutable olmal\u0131d\u0131rlar).<\/p>\nsetTimeout<\/code> kullanmak veya bir veritaban\u0131 sorgusu \u00e7al\u0131\u015ft\u0131rmak gibi asenkron i\u015flemlerin hepsi yan etkilerdir. Bu i\u015flemlerin sonucu zamanla de\u011fi\u015febilir, d\u0131\u015f kaynaklara ba\u011f\u0131ml\u0131d\u0131r ve genellikle tahmin edilemez bir s\u00fcre al\u0131r. Bu nedenle, bir API \u00e7a\u011fr\u0131s\u0131n\u0131 do\u011frudan bir indirgeyici i\u00e7inde yapmak, indirgeyicinin safl\u0131k ilkesini ihlal eder ve Redux’\u0131n temel mimarisini bozar.<\/p>\ndispatch<\/code> fonksiyonuna g\u00f6nderilen eylemlerin basit, d\u00fcz JavaScript nesneleri olmas\u0131 beklenir. Bu nesneler, type<\/code> \u00f6zelli\u011fi arac\u0131l\u0131\u011f\u0131yla ne t\u00fcr bir de\u011fi\u015fikli\u011fin yap\u0131laca\u011f\u0131n\u0131 belirtir ve iste\u011fe ba\u011fl\u0131 olarak payload<\/code> gibi ek veriler i\u00e7erebilir. Eylemlerin d\u00fcz nesneler olmas\u0131, seri hale getirilmelerini (serialize) ve zaman yolculu\u011fu hata ay\u0131klama (time-travel debugging) gibi Redux DevTools \u00f6zelliklerinin d\u00fczg\u00fcn \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n
\n* Kullan\u0131c\u0131 verisi \u00e7ekme iste\u011fini ba\u015flatma.
\n* API \u00e7a\u011fr\u0131s\u0131n\u0131n sonucunu bekleme.
\n* API \u00e7a\u011fr\u0131s\u0131 ba\u015far\u0131l\u0131 olursa, gelen veriyi Redux store’a kaydetme.
\n* API \u00e7a\u011fr\u0131s\u0131 ba\u015far\u0131s\u0131z olursa, hatay\u0131 Redux store’a kaydetme.<\/p>\nFETCH_USERS_REQUEST<\/code>, FETCH_USERS_SUCCESS<\/code>, FETCH_USERS_FAILURE<\/code>). Ancak bu eylemleri ne zaman dispatch<\/code> edece\u011fiz? API \u00e7a\u011fr\u0131s\u0131n\u0131n kendisi nerede yap\u0131lacak? Do\u011frudan dispatch<\/code> \u00e7a\u011fr\u0131s\u0131ndan \u00f6nce mi? Yoksa bir indirgeyici i\u00e7inde mi? Bu sorular, Redux’\u0131n asenkron i\u015flemler i\u00e7in do\u011frudan bir mekanizma sunmad\u0131\u011f\u0131n\u0131 ve bir k\u00f6pr\u00fcye ihtiya\u00e7 duyuldu\u011funu a\u00e7\u0131k\u00e7a g\u00f6sterir.<\/p>\nMiddleware Kavram\u0131: Redux Ak\u0131\u015f\u0131ndaki K\u00f6pr\u00fc<\/h3>\n
dispatch<\/code> fonksiyonuna g\u00f6nderilen eylemler ile bu eylemlerin indirgeyicilere ula\u015fmas\u0131 aras\u0131na yerle\u015fen bir katmand\u0131r. Bir middleware, bir eylemi yakalayabilir, \u00fczerinde de\u011fi\u015fiklik yapabilir, bir \u015feyleri loglayabilir, API \u00e7a\u011fr\u0131lar\u0131 ba\u015flatabilir, ba\u015fka eylemler dispatch<\/code> edebilir ve hatta eylemin indirgeyicilere ula\u015fmas\u0131n\u0131 engelleyebilir.<\/p>\ndispatch<\/code> fonksiyonu, bir eylemi do\u011frudan indirgeyicilere g\u00f6ndermeden \u00f6nce middleware zincirinden ge\u00e7irir. Her middleware, bir eylemi i\u015fleme yetene\u011fine sahiptir ve bir sonraki middleware’e (veya zincirin sonundaysa indirgeyicilere) eylemi iletmek i\u00e7in bir next<\/code> fonksiyonu sa\u011flar.<\/p>\nconst myMiddleware = store => next => action => {\n \/\/ Eylem indirgeyicilere ula\u015fmadan \u00f6nce burada bir \u015feyler yapabiliriz\n console.log('Dispatch edilen eylem:', action.type);\n\n \/\/ Eylemi bir sonraki middleware'e veya indirgeyicilere ilet\n const result = next(action);\n\n \/\/ Eylem i\u015flendikten sonra burada bir \u015feyler yapabiliriz\n console.log('Yeni durum:', store.getState());\n\n return result;\n};<\/code><\/pre>\nstore<\/code>: getState()<\/code> ve dispatch()<\/code> gibi store metotlar\u0131na eri\u015fim sa\u011flar.
\n* next<\/code>: Zincirdeki bir sonraki middleware’i (veya en sondaysa orijinal dispatch<\/code> fonksiyonunu) temsil eden fonksiyondur. Eylemi next(action)<\/code> ile \u00e7a\u011f\u0131rarak zincirde ilerletiriz.
\n* action<\/code>: dispatch<\/code> edilen mevcut eylem nesnesidir.<\/p>\nRedux Thunk’\u0131 Tan\u0131yal\u0131m<\/h3>\n
dispatch<\/code> etmek yerine, asenkron bir i\u015flem tamamland\u0131\u011f\u0131nda dispatch<\/code> edilecek bir fonksiyon d\u00f6nd\u00fcrmek anlam\u0131na gelir.<\/p>\ndispatch<\/code> edilen her eylemi kontrol eder:
\n1. D\u00fcz Nesne \u0130se<\/strong>: E\u011fer dispatch<\/code> edilen \u015fey d\u00fcz bir JavaScript nesnesiyse (yani senkron bir eylemse), Thunk middleware’i onu es ge\u00e7er ve bir sonraki middleware’e veya do\u011frudan indirgeyicilere iletir.
\n2. Fonksiyon \u0130se<\/strong>: E\u011fer dispatch<\/code> edilen \u015fey bir fonksiyonsa (yani bir thunk eylemiyse), Thunk middleware’i bu fonksiyonu \u00e7a\u011f\u0131r\u0131r. Bu fonksiyon, iki arg\u00fcman al\u0131r:
\n * dispatch<\/code>: Redux store’unun dispatch<\/code> fonksiyonu. Bu sayede thunk i\u00e7inde ba\u015fka eylemler dispatch<\/code> edilebilir (\u00f6rne\u011fin, API iste\u011finin ba\u015flad\u0131\u011f\u0131n\u0131, ba\u015far\u0131l\u0131 oldu\u011funu veya ba\u015far\u0131s\u0131z oldu\u011funu belirten eylemler).
\n * getState<\/code>: Redux store’unun getState<\/code> fonksiyonu. Bu, thunk i\u00e7inde mevcut Redux durumuna eri\u015fim sa\u011flar. B\u00f6ylece, mevcut duruma g\u00f6re ko\u015fullu mant\u0131k y\u00fcr\u00fct\u00fclebilir.<\/p>\ndispatch<\/code> etmesine olanak tan\u0131r.<\/p>\n
\n* Birden Fazla dispatch<\/code><\/strong>: Tek bir asenkron i\u015flem s\u0131ras\u0131nda birden fazla eylem (REQUEST<\/code>, SUCCESS<\/code>, FAILURE<\/code> gibi) dispatch<\/code> edebilirsiniz.
\n* Ko\u015fullu Mant\u0131k<\/strong>: getState<\/code> arg\u00fcman\u0131n\u0131 kullanarak mevcut duruma g\u00f6re ko\u015fullu i\u015flemler yapabilir veya belirli bir verinin zaten store’da olup olmad\u0131\u011f\u0131n\u0131 kontrol edebilirsiniz.
\n* Basitlik<\/strong>: Di\u011fer asenkron middleware’lerine k\u0131yasla (\u00f6rne\u011fin Redux Saga veya Redux Observable) \u00f6\u011frenme e\u011frisi \u00e7ok daha d\u00fc\u015f\u00fckt\u00fcr. JavaScript’in temel asenkron \u00f6zelliklerini (Promise’ler, async\/await<\/code>) do\u011frudan kullan\u0131r.<\/p>\nRedux Thunk Uygulamas\u0131: Ad\u0131m Ad\u0131m<\/h3>\n
1. Kurulum<\/h4>\n
npm install redux-thunk\nveya<\/h2>\nyarn add redux-thunk<\/code><\/pre>\n
2. Middleware’i Redux Store’una Uygulama<\/h4>\n
createStore<\/code> (geleneksel Redux) veya configureStore<\/code> (Redux Toolkit ile \u00f6nerilen) fonksiyonlar\u0131 arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r.<\/p>\nimport { createStore, applyMiddleware } from 'redux';\nimport { thunk } from 'redux-thunk'; \/\/ ES6 mod\u00fcl\u00fcnden thunk'\u0131 i\u00e7e aktar\u0131n\nimport rootReducer from '.\/reducers'; \/\/ K\u00f6k indirgeyiciniz\n\nconst store = createStore(\n rootReducer,\n applyMiddleware(thunk) \/\/ Redux Thunk'\u0131 middleware olarak uygulay\u0131n\n);\n\nexport default store;<\/code><\/pre>\nconfigureStore<\/code> fonksiyonu, varsay\u0131lan olarak redux-thunk<\/code> ve di\u011fer baz\u0131 faydal\u0131 middleware’leri i\u00e7erir, bu y\u00fczden genellikle manuel olarak eklemeniz gerekmez.<\/p>\nimport { configureStore } from '@reduxjs\/toolkit';\nimport rootReducer from '.\/reducers'; \/\/ K\u00f6k indirgeyiciniz\n\nconst store = configureStore({\n reducer: rootReducer,\n \/\/ middleware'i manuel olarak eklemeniz gerekmez, configureStore varsay\u0131lan olarak thunk'\u0131 i\u00e7erir.\n \/\/ Ancak, \u00f6zel bir middleware eklemek veya varsay\u0131lanlar\u0131 de\u011fi\u015ftirmek isterseniz:\n \/\/ middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(myCustomMiddleware),\n});\n\nexport default store;<\/code><\/pre>\n3. \u00d6rnek Senaryo: Kullan\u0131c\u0131 Verisi \u00c7ekme (API \u00c7a\u011fr\u0131s\u0131)<\/h4>\n
\/\/ actions\/userTypes.js\nexport const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST';\nexport const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS';\nexport const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE';<\/code><\/pre>\n\/\/ reducers\/userReducer.js\nimport {\n FETCH_USERS_REQUEST,\n FETCH_USERS_SUCCESS,\n FETCH_USERS_FAILURE,\n} from '..\/actions\/userTypes';\n\nconst initialState = {\n loading: false,\n users: [],\n error: '',\n};\n\nconst userReducer = (state = initialState, action) => {\n switch (action.type) {\n case FETCH_USERS_REQUEST:\n return {\n ...state,\n loading: true,\n };\n case FETCH_USERS_SUCCESS:\n return {\n ...state,\n loading: false,\n users: action.payload,\n error: '',\n };\n case FETCH_USERS_FAILURE:\n return {\n ...state,\n loading: false,\n users: [],\n error: action.payload,\n };\n default:\n return state;\n }\n};\n\nexport default userReducer;<\/code><\/pre>\ndispatch<\/code> edecektir.<\/p>\n\/\/ actions\/userActions.js\nimport axios from 'axios'; \/\/ API \u00e7a\u011fr\u0131lar\u0131 i\u00e7in axios kullanaca\u011f\u0131z\nimport {\n FETCH_USERS_REQUEST,\n FETCH_USERS_SUCCESS,\n FETCH_USERS_FAILURE,\n} from '.\/userTypes';\n\n\/\/ Normal eylem yarat\u0131c\u0131lar\u0131 (d\u00fcz nesneler d\u00f6nd\u00fcr\u00fcr)\nexport const fetchUsersRequest = () => ({\n type: FETCH_USERS_REQUEST,\n});\n\nexport const fetchUsersSuccess = (users) => ({\n type: FETCH_USERS_SUCCESS,\n payload: users,\n});\n\nexport const fetchUsersFailure = (error) => ({\n type: FETCH_USERS_FAILURE,\n payload: error,\n});\n\n\/\/ THUNK EYLEM YARATICISI\nexport const fetchUsers = () => {\n return async (dispatch) => { \/\/ Redux Thunk sayesinde bu fonksiyonu dispatch edebiliriz\n dispatch(fetchUsersRequest()); \/\/ \u0130stek ba\u015flad\u0131\u011f\u0131nda y\u00fckleme durumunu ayarla\n try {\n const response = await axios.get('https:\/\/jsonplaceholder.typicode.com\/users');\n const users = response.data;\n dispatch(fetchUsersSuccess(users)); \/\/ Ba\u015far\u0131l\u0131 oldu\u011funda kullan\u0131c\u0131lar\u0131 store'a kaydet\n } catch (error) {\n dispatch(fetchUsersFailure(error.message)); \/\/ Hata oldu\u011funda hata mesaj\u0131n\u0131 kaydet\n }\n };\n};<\/code><\/pre>\n
\n fetchUsers<\/code> fonksiyonu, bir <\/em>ba\u015fka fonksiyon* d\u00f6nd\u00fcr\u00fcyor. \u0130\u015fte bu d\u00f6nd\u00fcr\u00fclen fonksiyon bir “thunk”t\u0131r.
\n* Bu i\u00e7 fonksiyon dispatch<\/code> ve getState<\/code> arg\u00fcmanlar\u0131n\u0131 al\u0131r (bu \u00f6rnekte getState<\/code> kullanmad\u0131k, ancak ihtiyac\u0131m\u0131z olsayd\u0131 eri\u015febilirdik).
\n* \u0130\u00e7 fonksiyonun i\u00e7inde, \u00f6nce fetchUsersRequest()<\/code> eylemini dispatch<\/code> ederek y\u00fckleme durumunu true<\/code> yapar\u0131z.
\n* Ard\u0131ndan axios.get()<\/code> ile asenkron bir API \u00e7a\u011fr\u0131s\u0131 yapar\u0131z. async\/await<\/code> kullanarak kodu daha okunabilir hale getirdik.
\n* API \u00e7a\u011fr\u0131s\u0131 ba\u015far\u0131l\u0131 olursa, fetchUsersSuccess()<\/code> eylemini dispatch<\/code> ederek gelen kullan\u0131c\u0131 verilerini store’a kaydederiz.
\n* API \u00e7a\u011fr\u0131s\u0131 ba\u015far\u0131s\u0131z olursa, fetchUsersFailure()<\/code> eylemini dispatch<\/code> ederek hata mesaj\u0131n\u0131 store’a kaydederiz.<\/p>\n4. Bile\u015fen (Component) \u0130\u00e7inden Kullan\u0131m<\/h4>\n
react-redux<\/code> k\u00fct\u00fcphanesinin useDispatch<\/code> ve useSelector<\/code> hook’lar\u0131n\u0131 kullanaca\u011f\u0131z.<\/p>\n\/\/ components\/UserList.js\nimport React, { useEffect } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { fetchUsers } from '..\/actions\/userActions';\n\nfunction UserList() {\n const dispatch = useDispatch();\n const userData = useSelector((state) => state.user); \/\/ userReducer'\u0131n y\u00f6netti\u011fi state'i al\n\n useEffect(() => {\n dispatch(fetchUsers()); \/\/ Bile\u015fen y\u00fcklendi\u011finde kullan\u0131c\u0131lar\u0131 \u00e7ekmek i\u00e7in thunk'\u0131 dispatch et\n }, [dispatch]); \/\/ dispatch fonksiyonu de\u011fi\u015fmedi\u011fi i\u00e7in tek seferlik \u00e7al\u0131\u015f\u0131r\n\n if (userData.loading) {\n return Kullan\u0131c\u0131lar y\u00fckleniyor...<\/h2>;\n }\n\n if (userData.error) {\n return
Hata: {userData.error}<\/h2>;\n }\n\n return (\n
Kullan\u0131c\u0131 Listesi<\/h2>\n
\n {userData.users.map((user) => (\n
\u0130leri Thunk Desenleri ve En \u0130yi Uygulamalar<\/h3>\n
1.
getState<\/code> Kullan\u0131m\u0131 ile Ko\u015fullu Mant\u0131k<\/h4>\ndispatch<\/code> ile birlikte getState<\/code> fonksiyonunu da arg\u00fcman olarak al\u0131r. Bu, mevcut Redux durumuna eri\u015fmenizi ve buna g\u00f6re ko\u015fullu mant\u0131k y\u00fcr\u00fctmenizi sa\u011flar.<\/p>\nexport const fetchUserIfNeeded = (userId) => {\n return async (dispatch, getState) => {\n const state = getState();\n const user = state.users.data[userId]; \/\/ Kullan\u0131c\u0131n\u0131n store'da olup olmad\u0131\u011f\u0131n\u0131 kontrol et\n\n if (user && !state.users.loading) { \/\/ Kullan\u0131c\u0131 varsa ve y\u00fcklenmiyorsa tekrar \u00e7ekme\n return;\n }\n\n \/\/ E\u011fer kullan\u0131c\u0131 yoksa veya y\u00fckleniyorsa, \u00e7ekme i\u015flemini ba\u015flat\n dispatch(fetchUserRequest());\n try {\n const response = await axios.get(\/api\/users\/${userId}<\/code>);\n dispatch(fetchUserSuccess(response.data));\n } catch (error) {\n dispatch(fetchUserFailure(error.message));\n }\n };\n};<\/code><\/pre>\n2. Thunk’lar\u0131 Zincirleme (Chaining Thunks)<\/h4>\n
dispatch<\/code> edebilirsiniz. Bu, daha b\u00fcy\u00fck ve karma\u015f\u0131k asenkron i\u015f ak\u0131\u015flar\u0131n\u0131 daha k\u00fc\u00e7\u00fck, y\u00f6netilebilir par\u00e7alara b\u00f6lmek i\u00e7in faydal\u0131 olabilir. Ancak, bu yakla\u015f\u0131m dikkatli kullan\u0131lmal\u0131, aksi takdirde kod karma\u015f\u0131kl\u0131\u011f\u0131 artabilir.<\/p>\nexport const createUser = (userData) => {\n return async (dispatch) => {\n dispatch(createUserRequest());\n try {\n await axios.post('\/api\/users', userData);\n dispatch(createUserSuccess());\n dispatch(fetchUsers()); \/\/ Yeni kullan\u0131c\u0131 olu\u015fturulduktan sonra t\u00fcm kullan\u0131c\u0131 listesini yeniden \u00e7ek\n } catch (error) {\n dispatch(createUserFailure(error.message));\n }\n };\n};<\/code><\/pre>\n3. Kod Organizasyonu<\/h4>\n
actions.js<\/code>, reducers.js<\/code>, types.js<\/code> gibi dosyalar bulunur.<\/p>\nsrc\/\n\u251c\u2500\u2500 features\/\n\u2502 \u2514\u2500\u2500 users\/\n\u2502 \u251c\u2500\u2500 actions.js \/\/ Thunk'lar ve normal eylem yarat\u0131c\u0131lar\u0131\n\u2502 \u251c\u2500\u2500 reducers.js \/\/ Kullan\u0131c\u0131 indirgeyicisi\n\u2502 \u2514\u2500\u2500 types.js \/\/ Eylem tipleri\n\u251c\u2500\u2500 store\/\n\u2502 \u2514\u2500\u2500 index.js \/\/ Store konfig\u00fcrasyonu\n\u2514\u2500\u2500 App.js<\/code><\/pre>\ncreateSlice<\/code> kullan\u0131larak daha da basitle\u015ftirilir, \u00e7\u00fcnk\u00fc dilimler (slices) eylem tiplerini, eylem yarat\u0131c\u0131lar\u0131n\u0131 ve indirgeyicileri tek bir yerde birle\u015ftirir.<\/p>\n4. Thunk’lar\u0131 Test Etme<\/h4>\n
dispatch<\/code> ve API \u00e7a\u011fr\u0131lar\u0131n\u0131 mock’layarak kolayca test edilebilirler.<\/p>\n\/\/ userActions.test.js\nimport { fetchUsers, fetchUsersRequest, fetchUsersSuccess, fetchUsersFailure } from '.\/userActions';\nimport axios from 'axios';\nimport MockAdapter from 'axios-mock-adapter'; \/\/ axios isteklerini mocklamak i\u00e7in\n\ndescribe('fetchUsers thunk', () => {\n let store;\n let mock;\n\n beforeEach(() => {\n \/\/ store'u mock'la, sadece dispatch fonksiyonu \u00f6nemlidir\n store = {\n dispatch: jest.fn(), \/\/ dispatch'i bir mock fonksiyonu yap\n getState: jest.fn(), \/\/ getState'i de mock'layabiliriz\n };\n mock = new MockAdapter(axios); \/\/ axios'u mock'la\n });\n\n afterEach(() => {\n mock.restore(); \/\/ Her testten sonra mock'u s\u0131f\u0131rla\n });\n\n it('ba\u015far\u0131l\u0131 bir API \u00e7a\u011fr\u0131s\u0131 durumunda do\u011fru eylemleri dispatch etmeli', async () => {\n const users = [{ id: 1, name: 'Test User' }];\n mock.onGet('https:\/\/jsonplaceholder.typicode.com\/users').reply(200, users);\n\n await fetchUsers()(store.dispatch, store.getState); \/\/ Thunk'\u0131 \u00e7a\u011f\u0131r\n\n expect(store.dispatch).toHaveBeenCalledTimes(2); \/\/ REQUEST ve SUCCESS olmak \u00fczere 2 kez dispatch edilmeli\n expect(store.dispatch).toHaveBeenNthCalledWith(1, fetchUsersRequest());\n expect(store.dispatch).toHaveBeenNthCalledWith(2, fetchUsersSuccess(users));\n });\n\n it('ba\u015far\u0131s\u0131z bir API \u00e7a\u011fr\u0131s\u0131 durumunda hata eylemini dispatch etmeli', async () => {\n const errorMessage = 'Network Error';\n mock.onGet('https:\/\/jsonplaceholder.typicode.com\/users').networkErrorOnce();\n\n await fetchUsers()(store.dispatch, store.getState);\n\n expect(store.dispatch).toHaveBeenCalledTimes(2);\n expect(store.dispatch).toHaveBeenNthCalledWith(1, fetchUsersRequest());\n expect(store.dispatch).toHaveBeenNthCalledWith(2, fetchUsersFailure(errorMessage));\n });\n});<\/code><\/pre>\ndispatch<\/code> etti\u011finden emin olman\u0131z\u0131 sa\u011flar.<\/p>\nRedux Thunk Alternatifleri (K\u0131sa Bir Bak\u0131\u015f)<\/h3>\n
async\/await<\/code>) kullanmas\u0131 nedeniyle bir\u00e7ok proje i\u00e7in tercih edilen se\u00e7enektir. K\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli uygulamalar i\u00e7in genellikle fazlas\u0131yla yeterlidir. Ek bir k\u00fct\u00fcphane veya paradigma (generator’lar, reaktif programlama) \u00f6\u011frenme ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r, bu da yeni ba\u015flayanlar veya daha az karma\u015f\u0131k asenkron ihtiya\u00e7lar\u0131 olan projeler i\u00e7in idealdir.<\/p>\nRedux Thunk’\u0131n Art\u0131lar\u0131 ve Eksileri<\/h3>\n
Art\u0131lar\u0131:<\/h4>\n
\n2. D\u00fc\u015f\u00fck \u00d6\u011frenme E\u011frisi<\/strong>: JavaScript’in mevcut asenkron yap\u0131lar\u0131n\u0131 (Promise’ler, async\/await<\/code>) do\u011frudan kullan\u0131r. Ek bir paradigma veya \u00f6zel bir syntax \u00f6\u011frenmenize gerek kalmaz.
\n3. Do\u011frudan dispatch<\/code> ve getState<\/code> Eri\u015fimi<\/strong>: Thunk fonksiyonu i\u00e7inde store’un dispatch<\/code> ve getState<\/code> metotlar\u0131na do\u011frudan eri\u015fim, b\u00fcy\u00fck esneklik sa\u011flar.
\n4. Esneklik<\/strong>: Asenkron i\u015flemleri, ko\u015fullu mant\u0131\u011f\u0131 ve birden fazla eylem dispatch<\/code> etmeyi kolayca y\u00f6netebilir.
\n5. Yayg\u0131n Kullan\u0131m<\/strong>: Redux Toolkit taraf\u0131ndan varsay\u0131lan olarak dahil edilmesi ve geni\u015f topluluk deste\u011fi sayesinde yayg\u0131n olarak kullan\u0131l\u0131r.<\/p>\nEksileri:<\/h4>\n
\n2. \u0130\u015flem \u0130ptali Zorlu\u011fu<\/strong>: Devam eden bir asenkron i\u015flemi (\u00f6rne\u011fin bir API \u00e7a\u011fr\u0131s\u0131) iptal etmek, Thunk ile do\u011frudan desteklenmez ve manuel olarak y\u00f6netilmesi gerekir. Redux Saga veya Redux Observable gibi alternatifler, bu t\u00fcr senaryolar i\u00e7in daha g\u00fc\u00e7l\u00fc yerle\u015fik mekanizmalara sahiptir.
\n3. Test Edilebilirlik (Bazen Daha Zor)<\/strong>: Thunk’lar genellikle yan etkiler i\u00e7erdi\u011fi i\u00e7in, test yazarken API \u00e7a\u011fr\u0131lar\u0131n\u0131 ve dispatch<\/code> fonksiyonunu mock’lamak gerekir. Bu, baz\u0131 durumlarda Redux Saga’n\u0131n daha bildirimsel test yakla\u015f\u0131mlar\u0131na g\u00f6re biraz daha zorlay\u0131c\u0131 olabilir.
\n4. Geli\u015fmi\u015f \u00d6zellik Eksikli\u011fi<\/strong>: E\u015fzamanl\u0131l\u0131k kontrol\u00fc, debouncing\/throttling gibi geli\u015fmi\u015f yan etki y\u00f6netimi desenleri i\u00e7in Thunk’\u0131n \u00fczerine manuel olarak kod yazmak gerekir.<\/p>\nSonu\u00e7<\/h3>\n
dispatch<\/code> etme ve mevcut Redux durumuna eri\u015ferek ko\u015fullu mant\u0131k y\u00fcr\u00fctme yetene\u011fi sa\u011flar.<\/p>\n