{"id":34380,"date":"2025-11-15T23:31:07","date_gmt":"2025-11-15T20:31:07","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/react-usereducer-derin-dalis-quizden-kidemli-desenlere\/"},"modified":"2025-11-15T23:31:07","modified_gmt":"2025-11-15T20:31:07","slug":"react-usereducer-derin-dalis-quizden-kidemli-desenlere","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/react-usereducer-derin-dalis-quizden-kidemli-desenlere\/","title":{"rendered":"React useReducer Derin Dal\u0131\u015f: Quiz’den K\u0131demli Desenlere"},"content":{"rendered":"

<\/p>\n

React uygulamalar\u0131n\u0131zda karma\u015f\u0131k durum y\u00f6netimi mi yapmaya \u00e7al\u0131\u015f\u0131yorsunuz? Belki de useState<\/code> hook’unun yetersiz kald\u0131\u011f\u0131 durumlarla kar\u015f\u0131la\u015f\u0131yorsunuzdur. Bu makale, useReducer<\/code>‘\u0131n temel prensiplerinden ileri d\u00fczey kullan\u0131m kal\u0131plar\u0131na kadar her \u015feyi ad\u0131m ad\u0131m a\u00e7\u0131klayarak, sizi bir ba\u015flang\u0131\u00e7 seviyesinden k\u0131demli bir React geli\u015ftirici seviyesine ta\u015f\u0131yacak.<\/p>\n

React\u2019\u0131n temel yap\u0131 ta\u015flar\u0131ndan biri olan state (durum) y\u00f6netimi, uygulamalar\u0131n dinamik ve etkile\u015fimli olmas\u0131n\u0131 sa\u011flayan kritik bir unsurdur. K\u00fc\u00e7\u00fck \u00f6l\u00e7ekli uygulamalarda useState<\/code> hook’u genellikle yeterli olurken, uygulamalar b\u00fcy\u00fcd\u00fck\u00e7e ve state mant\u0131\u011f\u0131 daha karma\u015f\u0131k hale geldik\u00e7e, useState<\/code> kullan\u0131m\u0131 baz\u0131 zorluklar\u0131 beraberinde getirebilir. \u00d6zellikle bir state g\u00fcncellemesi ba\u015fka bir state’e ba\u011fl\u0131 oldu\u011funda veya bir\u00e7ok state g\u00fcncellemesinin ayn\u0131 anda ger\u00e7ekle\u015fmesi gerekti\u011finde, kodun okunabilirli\u011fi ve bak\u0131m\u0131 zorla\u015fabilir. \u0130\u015fte tam da bu noktada useReducer<\/code> devreye girer; useState<\/code>‘e g\u00f6re daha yap\u0131land\u0131r\u0131lm\u0131\u015f ve \u00f6ng\u00f6r\u00fclebilir bir state y\u00f6netimi \u00e7\u00f6z\u00fcm\u00fc sunar.<\/p>\n

useReducer<\/code>, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, JavaScript’teki Array.prototype.reduce()<\/code> metodunun \u00e7al\u0131\u015fma prensibine benzer bir mant\u0131kla i\u015fler. Bir reducer<\/strong> fonksiyonu, mevcut state’i ve bir action<\/strong>‘\u0131 alarak yeni bir state d\u00f6nd\u00fcr\u00fcr. Bu model, \u00f6zellikle Redux gibi k\u00fct\u00fcphanelerde yayg\u0131n olarak kullan\u0131lan “tek kaynak do\u011fruluk” prensibine dayan\u0131r ve state de\u011fi\u015fimlerini merkezi bir mant\u0131kla y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r. B\u00f6ylece, uygulaman\u0131n herhangi bir yerinden bir action g\u00f6nderildi\u011finde, state’in nas\u0131l de\u011fi\u015fece\u011fi tek bir yerde tan\u0131mlanm\u0131\u015f olur, bu da hatalar\u0131n izlenmesini ve d\u00fczeltilmesini \u00f6nemli \u00f6l\u00e7\u00fcde basitle\u015ftirir. Ayr\u0131ca, state g\u00fcncellemelerinin ard\u0131\u015f\u0131k oldu\u011fu veya \u00f6nceki state’e ba\u011fl\u0131 oldu\u011fu durumlarda useReducer<\/code>, useState<\/code>‘in callback formlar\u0131na k\u0131yasla daha temiz ve anla\u015f\u0131l\u0131r bir kod yap\u0131s\u0131 sunar. Dolay\u0131s\u0131yla, state mant\u0131\u011f\u0131n\u0131z\u0131n karma\u015f\u0131kl\u0131\u011f\u0131 artt\u0131\u011f\u0131nda veya birden fazla alt bile\u015fenin ayn\u0131 state’i payla\u015fmas\u0131 gerekti\u011finde, useReducer<\/code> kullanmak, uygulaman\u0131z\u0131n \u00f6l\u00e7eklenebilirli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131racakt\u0131r.<\/p>\n

useReducer Temelleri: State, Action ve Reducer Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n

useReducer<\/code>‘\u0131 anlamak i\u00e7in \u00fc\u00e7 temel kavram\u0131 netle\u015ftirmemiz gerekiyor: state<\/strong>, action<\/strong> ve reducer<\/strong>. Bu \u00fc\u00e7l\u00fc, useReducer<\/code> hook’unun kalbini olu\u015fturur ve birlikte uyumlu bir \u015fekilde \u00e7al\u0131\u015farak uygulaman\u0131z\u0131n durumunu y\u00f6netir. Hadi her birini ayr\u0131 ayr\u0131 inceleyelim ve basit bir saya\u00e7 \u00f6rne\u011fi \u00fczerinden nas\u0131l i\u015flediklerini g\u00f6relim.<\/p>\n

1. State (Durum):<\/strong> Uygulaman\u0131z\u0131n mevcut anl\u0131k veri y\u0131\u011f\u0131n\u0131d\u0131r. Bir kullan\u0131c\u0131n\u0131n ad\u0131, bir \u00fcr\u00fcn\u00fcn sepet miktar\u0131, bir g\u00f6revin tamamlan\u0131p tamamlanmad\u0131\u011f\u0131 gibi dinamik bilgiler state i\u00e7inde tutulur. useReducer<\/code> ba\u011flam\u0131nda, state genellikle bir JavaScript nesnesi veya basit bir de\u011fer olabilir. \u00d6rne\u011fin, bir saya\u00e7 uygulamas\u0131 i\u00e7in state basit\u00e7e bir say\u0131 olabilir: { count: 0 }<\/code>.<\/p>\n

2. Action (Eylem):<\/strong> State’i de\u011fi\u015ftirmek i\u00e7in g\u00f6nderilen bir sinyaldir. Action’lar genellikle bir type<\/code> \u00f6zelli\u011fi i\u00e7eren basit JavaScript nesneleridir ve iste\u011fe ba\u011fl\u0131 olarak bir payload<\/code> (y\u00fck) ta\u015f\u0131yabilirler. type<\/code>, hangi de\u011fi\u015fikli\u011fin yap\u0131laca\u011f\u0131n\u0131 belirtirken, payload<\/code> ise bu de\u011fi\u015fiklik i\u00e7in gerekli veriyi ta\u015f\u0131r. \u00d6rne\u011fin, bir saya\u00e7 i\u00e7in art\u0131rma action’\u0131 { type: 'INCREMENT' }<\/code> \u015feklinde olabilirken, belirli bir de\u011ferle art\u0131rma action’\u0131 { type: 'INCREMENT_BY', payload: 5 }<\/code> \u015feklinde olabilir. Action’lar, uygulaman\u0131zda neyin ger\u00e7ekle\u015fti\u011fini tan\u0131mlayan soyut mesajlar gibidir.<\/p>\n

3. Reducer (\u0130ndirgeyici):<\/strong> Mevcut state’i ve g\u00f6nderilen action’\u0131 alarak, bu bilgilere g\u00f6re yeni bir state d\u00f6nd\u00fcren saf bir fonksiyondur. Saf fonksiyon olmas\u0131 demek, ayn\u0131 input’larla her zaman ayn\u0131 output’u vermesi ve d\u0131\u015far\u0131dan hi\u00e7bir side effect (yan etki) \u00fcretmemesi anlam\u0131na gelir. Reducer fonksiyonu genellikle bir switch<\/code> ifadesi kullan\u0131larak farkl\u0131 action t\u00fcrlerine g\u00f6re farkl\u0131 state de\u011fi\u015fimlerini y\u00f6netir. Reducer fonksiyonu asla mevcut state’i do\u011frudan de\u011fi\u015ftirmez; bunun yerine, her zaman yeni bir state nesnesi d\u00f6nd\u00fcr\u00fcr. Bu prensip, React’\u0131n ve immutability (de\u011fi\u015fmezlik) kavram\u0131n\u0131n temelini olu\u015fturur ve state y\u00f6netimini \u00e7ok daha \u00f6ng\u00f6r\u00fclebilir hale getirir. <\/p>\n

A\u015fa\u011f\u0131daki \u00f6rnekte, basit bir saya\u00e7 uygulamas\u0131 i\u00e7in bu \u00fc\u00e7 bile\u015fenin nas\u0131l bir araya geldi\u011fini g\u00f6rebilirsiniz:<\/p>\n

\n    \/\/ 1. Reducer Fonksiyonu\n    const counterReducer = (state, action) => {\n      switch (action.type) {\n        case 'INCREMENT':\n          return { count: state.count + 1 };\n        case 'DECREMENT':\n          return { count: state.count - 1 };\n        case 'RESET':\n          return { count: 0 };\n        case 'INCREMENT_BY_AMOUNT':\n          return { count: state.count + action.payload };\n        default:\n          return state; \/\/ Bilinmeyen action'lar i\u00e7in mevcut state'i d\u00f6nd\u00fcr\n      }\n    };\n\n    \/\/ 2. React Bile\u015feni i\u00e7inde useReducer kullan\u0131m\u0131\n    const Counter = () => {\n      \/\/ useReducer hook'u: [state, dispatch] d\u00f6nd\u00fcr\u00fcr\n      \/\/ \u0130lk arg\u00fcman: Reducer fonksiyonu\n      \/\/ \u0130kinci arg\u00fcman: Ba\u015flang\u0131\u00e7 state'i\n      const [state, dispatch] = React.useReducer(counterReducer, { count: 0 });\n\n      return (\n        
\n          
Saya\u00e7: {state.count}<\/h3>\n