{"id":36420,"date":"2025-12-16T07:40:40","date_gmt":"2025-12-16T04:40:40","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36420"},"modified":"2025-12-16T07:40:40","modified_gmt":"2025-12-16T04:40:40","slug":"root-reducer-kullanarak-redux-statei-nasil-sifirlanir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/root-reducer-kullanarak-redux-statei-nasil-sifirlanir\/","title":{"rendered":"Root Reducer Kullanarak Redux State’i Nas\u0131l S\u0131f\u0131rlan\u0131r?"},"content":{"rendered":"

<\/p>\n

Root Reducer Kullanarak Redux State’i Nas\u0131l S\u0131f\u0131rlan\u0131r?<\/h2>\n

Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren dinamik aray\u00fczler ve karma\u015f\u0131k etkile\u015fimlerle doludur. Bu t\u00fcr uygulamalarda, uygulaman\u0131n durumunu (state) y\u00f6netmek, geli\u015ftirme s\u00fcrecinin en kritik ve \u00e7o\u011fu zaman en zorlu y\u00f6nlerinden biridir. \u00d6zellikle tek sayfa uygulamalar\u0131 (SPA’lar) ba\u011flam\u0131nda, uygulaman\u0131n farkl\u0131 bile\u015fenleri aras\u0131nda tutarl\u0131 bir durum ak\u0131\u015f\u0131 sa\u011flamak, \u00f6l\u00e7eklenebilir ve bak\u0131m\u0131 kolay bir kod taban\u0131 olu\u015fturmak i\u00e7in hayati \u00f6neme sahiptir. \u0130\u015fte bu noktada Redux gibi durum y\u00f6netim k\u00fct\u00fcphaneleri devreye girer.<\/p>\n

Redux, JavaScript uygulamalar\u0131 i\u00e7in tahmin edilebilir bir durum konteyneridir. Temel prensipleri olan tek bir do\u011fruluk kayna\u011f\u0131 (single source of truth), durumun okunabilir olmas\u0131 ve durumun yaln\u0131zca saf fonksiyonlar (reducers) arac\u0131l\u0131\u011f\u0131yla de\u011fi\u015ftirilebilmesi sayesinde, b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar\u0131n durumunu y\u00f6netmeyi \u00f6nemli \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r. Ancak, uygulaman\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fc boyunca, bazen t\u00fcm uygulaman\u0131n durumunu veya belirli bir b\u00f6l\u00fcm\u00fcn\u00fc tamamen s\u0131f\u0131rlama ihtiyac\u0131 do\u011far. Bu makalede, bir Redux uygulamas\u0131n\u0131n t\u00fcm durumunu (state) bir “root reducer” kullanarak nas\u0131l etkin ve zarif bir \u015fekilde s\u0131f\u0131rlayaca\u011f\u0131m\u0131z\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Redux Durum Y\u00f6netimine Giri\u015f ve S\u0131f\u0131rlama \u0130htiyac\u0131<\/h3>\n

Redux, uygulaman\u0131z\u0131n global durumunu merkezi bir yerde, yani “store” i\u00e7inde tutar. Bu durum, “action” ad\u0131 verilen basit JavaScript nesneleri arac\u0131l\u0131\u011f\u0131yla tetiklenen “reducer” ad\u0131 verilen saf fonksiyonlar taraf\u0131ndan de\u011fi\u015ftirilir. Bu yap\u0131, durum de\u011fi\u015fikliklerini \u00f6ng\u00f6r\u00fclebilir ve izlenebilir hale getirir.<\/p>\n

Peki, Redux state’ini s\u0131f\u0131rlama ihtiyac\u0131 neden ortaya \u00e7\u0131kar? Birka\u00e7 yayg\u0131n senaryo \u015funlard\u0131r:<\/p>\n

* Kullan\u0131c\u0131 Oturumunu Kapatma (Logout):<\/strong> Bir kullan\u0131c\u0131 uygulamadan \u00e7\u0131k\u0131\u015f yapt\u0131\u011f\u0131nda, o kullan\u0131c\u0131ya ait t\u00fcm verilerin (kullan\u0131c\u0131 profili, sepet i\u00e7eri\u011fi, ki\u015fisel ayarlar vb.) Redux state’inden temizlenmesi gerekir. Aksi takdirde, bir sonraki kullan\u0131c\u0131 veya ayn\u0131 kullan\u0131c\u0131n\u0131n yeni bir oturumunda yanl\u0131\u015f veya eski verilerle kar\u015f\u0131la\u015f\u0131labilir.
\n* Kullan\u0131c\u0131 De\u011fi\u015fimi:<\/strong> \u00c7ok kullan\u0131c\u0131l\u0131 bir sistemde, bir kullan\u0131c\u0131n\u0131n oturumu kapan\u0131p ba\u015fka bir kullan\u0131c\u0131 giri\u015f yapt\u0131\u011f\u0131nda, \u00f6nceki kullan\u0131c\u0131n\u0131n verilerinin tamamen silinmesi ve yeni kullan\u0131c\u0131n\u0131n verileriyle doldurulmas\u0131 gerekir.
\n* Uygulama \u0130\u00e7i “S\u0131f\u0131rla” Fonksiyonlar\u0131:<\/strong> Bazen, bir formun veya belirli bir \u00f6zelli\u011fin durumunu ba\u015flang\u0131\u00e7 ayarlar\u0131na d\u00f6nd\u00fcrmek i\u00e7in bir “S\u0131f\u0131rla” d\u00fc\u011fmesi gerekebilir.
\n* Test Ortamlar\u0131:<\/strong> Uygulaman\u0131n farkl\u0131 test senaryolar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rmak i\u00e7in her testten \u00f6nce temiz bir durumla ba\u015flamak \u00f6nemlidir.
\n* Hata Kurtarma:<\/strong> Kritik bir hata durumunda, uygulaman\u0131n bilinen iyi bir duruma d\u00f6nmesi i\u00e7in state’in s\u0131f\u0131rlanmas\u0131 bir se\u00e7enek olabilir.<\/p>\n

Bu senaryolarda, Redux state’ini etkili bir \u015fekilde s\u0131f\u0131rlamak, hem g\u00fcvenlik hem de kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir.<\/p>\n

Redux Temelleri ve Root Reducer Kavram\u0131<\/h3>\n

Redux state’ini s\u0131f\u0131rlama mekanizmas\u0131n\u0131 anlamak i\u00e7in, Redux’\u0131n temel yap\u0131 ta\u015flar\u0131n\u0131 ve \u00f6zellikle combineReducers<\/code> fonksiyonunun rol\u00fcn\u00fc hat\u0131rlamak \u00f6nemlidir.<\/p>\n

Redux’\u0131n Ana Bile\u015fenleri<\/h4>\n

* Store:<\/strong> Uygulaman\u0131z\u0131n t\u00fcm durumunu bar\u0131nd\u0131ran tek bir JavaScript nesnesidir.
\n* Action:<\/strong> Uygulamada meydana gelen olaylar\u0131 tan\u0131mlayan basit JavaScript nesneleridir. Minimum bir type<\/code> \u00f6zelli\u011fine sahiptirler (\u00f6rn. { type: 'ADD_TODO', payload: 'Learn Redux' }<\/code>).
\n* Reducer:<\/strong> Mevcut durumu ve bir action’\u0131 alarak yeni durumu d\u00f6nd\u00fcren saf fonksiyonlard\u0131r. Reducer’lar asla do\u011frudan durumu de\u011fi\u015ftirmezler; her zaman durumun de\u011fi\u015ftirilmi\u015f bir kopyas\u0131n\u0131 d\u00f6nd\u00fcr\u00fcrler.
\n* Dispatch:<\/strong> Bir action’\u0131 store’a g\u00f6nderme y\u00f6ntemidir. Action, store’a ula\u015ft\u0131\u011f\u0131nda, reducer’lar taraf\u0131ndan i\u015flenir.<\/p>\n

CombineReducers ve Root Reducer<\/h4>\n

B\u00fcy\u00fck uygulamalarda, t\u00fcm durumu tek bir reducer i\u00e7inde y\u00f6netmek pratik de\u011fildir. Redux, durumu mant\u0131ksal dilimlere (slice) ay\u0131rmam\u0131z\u0131 ve her dilim i\u00e7in ayr\u0131 bir reducer yazmam\u0131z\u0131 te\u015fvik eder. \u00d6rne\u011fin, bir userReducer<\/code>, bir productReducer<\/code>, bir cartReducer<\/code> vb. olabilir.<\/p>\n

combineReducers<\/code> fonksiyonu, bu ba\u011f\u0131ms\u0131z reducer’lar\u0131 tek bir “root reducer” alt\u0131nda birle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. combineReducers<\/code>‘a bir nesne ge\u00e7irirsiniz; bu nesnenin anahtarlar\u0131 state’inizin bir b\u00f6l\u00fcm\u00fcne kar\u015f\u0131l\u0131k gelir ve de\u011ferleri ilgili reducer fonksiyonlar\u0131d\u0131r.<\/p>\n

\/\/ userReducer.js\nconst initialUserState = {\n    isAuthenticated: false,\n    profile: null,\n    loading: false,\n    error: null\n};\n\nconst userReducer = (state = initialUserState, action) => {\n    switch (action.type) {\n        case 'LOGIN_SUCCESS':\n            return { ...state, isAuthenticated: true, profile: action.payload, error: null };\n        case 'LOGOUT':\n            return { ...initialUserState }; \/\/ Bu sadece kendi dilimini s\u0131f\u0131rlar\n        default:\n            return state;\n    }\n};\n\nexport default userReducer;\n\n\/\/ productReducer.js\nconst initialProductState = {\n    products: [],\n    selectedProduct: null,\n    loading: false\n};\n\nconst productReducer = (state = initialProductState, action) => {\n    switch (action.type) {\n        case 'FETCH_PRODUCTS_SUCCESS':\n            return { ...state, products: action.payload, loading: false };\n        case 'SELECT_PRODUCT':\n            return { ...state, selectedProduct: action.payload };\n        default:\n            return state;\n    }\n};\n\nexport default productReducer;\n\n\/\/ rootReducer.js\nimport { combineReducers } from 'redux';\nimport userReducer from '.\/userReducer';\nimport productReducer from '.\/productReducer';\n\nconst rootReducer = combineReducers({\n    user: userReducer,\n    products: productReducer\n});\n\nexport default rootReducer;<\/code><\/pre>\n
Bu yap\u0131, state’in user<\/code> ve products<\/code> gibi anahtarlarla eri\u015filebilen b\u00f6l\u00fcmlere ayr\u0131lmas\u0131n\u0131 sa\u011flar. rootReducer<\/code> ise t\u00fcm bu b\u00f6l\u00fcmleri y\u00f6neten ana fonksiyondur.<\/p>\n
Redux State’ini S\u0131f\u0131rlamak \u0130\u00e7in \u0130lk Yakla\u015f\u0131mlar (ve Neden Yetersiz Kalabilirler)<\/h3>\n
Redux state’ini s\u0131f\u0131rlama ihtiyac\u0131 do\u011fdu\u011funda, akla gelebilecek ilk birka\u00e7 y\u00f6ntem olabilir. Ancak bu y\u00f6ntemler genellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda yetersiz kal\u0131r veya bak\u0131m\u0131 zorla\u015ft\u0131r\u0131r.<\/p>\n
1. Her Reducer \u0130\u00e7in Ayr\u0131 Bir S\u0131f\u0131rlama Action’\u0131 ve Logic’i<\/h4>\n
Bu yakla\u015f\u0131mda, her reducer kendi dilimini s\u0131f\u0131rlamak i\u00e7in \u00f6zel bir action type (\u00f6rn. RESET_USER_STATE<\/code>, RESET_PRODUCT_STATE<\/code>) dinler ve kendi initialState<\/code>‘ini d\u00f6nd\u00fcr\u00fcr.<\/p>\n
\/\/ userReducer.js\nconst userReducer = (state = initialUserState, action) => {\n    switch (action.type) {\n        \/\/ ... di\u011fer action'lar\n        case 'RESET_USER_STATE':\n            return { ...initialUserState };\n        default:\n            return state;\n    }\n};\n\n\/\/ productReducer.js\nconst productReducer = (state = initialProductState, action) => {\n    switch (action.type) {\n        \/\/ ... di\u011fer action'lar\n        case 'RESET_PRODUCT_STATE':\n            return { ...initialProductState };\n        default:\n            return state;\n    }\n};<\/code><\/pre>\n
Dezavantajlar\u0131:<\/strong><\/p>\n
*   Tekrar:<\/strong> Her yeni reducer ekledi\u011finizde, ona \u00f6zel bir s\u0131f\u0131rlama action’\u0131 ve logic’i eklemeniz gerekir. Bu, kod tekrar\u0131na yol a\u00e7ar.
\n*   Koordinasyon:<\/strong> T\u00fcm state’i s\u0131f\u0131rlamak istedi\u011finizde, t\u00fcm bu action’lar\u0131 tek tek dispatch etmeniz gerekir. Bu, bir logout<\/code> fonksiyonunda birden fazla dispatch<\/code> \u00e7a\u011fr\u0131s\u0131 anlam\u0131na gelir ve bir action’\u0131 unutmak kolayd\u0131r.
\n*   Hata Potansiyeli:<\/strong> Yeni bir reducer eklemeyi unutup ona s\u0131f\u0131rlama logic’i eklemezseniz, o b\u00f6l\u00fcm s\u0131f\u0131rlanmayacakt\u0131r.<\/p>\n
2. Root Reducer’da Her Dilimin Initial State’ini Manuel Olarak D\u00f6nd\u00fcrme<\/h4>\n
Bu yakla\u015f\u0131mda, root reducer’da \u00f6zel bir s\u0131f\u0131rlama action’\u0131 dinlenir ve bu action geldi\u011finde, her dilimin initialState<\/code>‘i manuel olarak bir nesne i\u00e7inde birle\u015ftirilerek d\u00f6nd\u00fcr\u00fcl\u00fcr.<\/p>\n
\/\/ rootReducer.js\nimport { combineReducers } from 'redux';\nimport userReducer, { initialUserState } from '.\/userReducer'; \/\/ initialState'i import et\nimport productReducer, { initialProductState } from '.\/productReducer'; \/\/ initialState'i import et\n\nconst appReducer = combineReducers({\n    user: userReducer,\n    products: productReducer\n});\n\nconst rootReducer = (state, action) => {\n    if (action.type === 'RESET_APP_STATE') {\n        \/\/ Her reducer'\u0131n initial state'ini manuel olarak birle\u015ftirme\n        return {\n            user: initialUserState,\n            products: initialProductState\n        };\n    }\n    return appReducer(state, action);\n};\n\nexport default rootReducer;<\/code><\/pre>\n
Dezavantajlar\u0131:<\/strong><\/p>\n
*   Ba\u011f\u0131ml\u0131l\u0131k:<\/strong> rootReducer<\/code>, her bir alt reducer’\u0131n initialState<\/code>‘ine do\u011frudan ba\u011f\u0131ml\u0131 hale gelir. Bu, alt reducer’lar\u0131n initialState<\/code>‘ini de\u011fi\u015ftirdi\u011finizde rootReducer<\/code>‘\u0131 da g\u00fcncellemeniz gerekti\u011fi anlam\u0131na gelir.
\n*   Bak\u0131m Zorlu\u011fu:<\/strong> Yeni bir reducer ekledi\u011finizde veya mevcut bir reducer’\u0131 kald\u0131rd\u0131\u011f\u0131n\u0131zda, rootReducer<\/code>‘\u0131 manuel olarak g\u00fcncellemeniz gerekir. Bu, b\u00fcy\u00fck uygulamalarda s\u00fcrd\u00fcr\u00fclemez hale gelir.
\n*   Tekrar:<\/strong> Yine kod tekrar\u0131 mevcuttur ve hata yapma olas\u0131l\u0131\u011f\u0131 y\u00fcksektir.<\/p>\n
Bu yakla\u015f\u0131mlar\u0131n her ikisi de, Redux’\u0131n “tek bir do\u011fruluk kayna\u011f\u0131” ve “mod\u00fclerlik” felsefesine tam olarak uymayan, merkezi olmayan veya bak\u0131m\u0131 zor \u00e7\u00f6z\u00fcmler sunar. Daha zarif ve \u00f6l\u00e7eklenebilir bir \u00e7\u00f6z\u00fcm, combineReducers<\/code>‘\u0131n kendisini kullanarak root reducer seviyesinde bir s\u0131f\u0131rlama mekanizmas\u0131 olu\u015fturmakt\u0131r.<\/p>\n
Root Reducer Kullanarak Redux State’ini S\u0131f\u0131rlama: Zarif \u00c7\u00f6z\u00fcm<\/h3>\n
Redux state’ini s\u0131f\u0131rlaman\u0131n en temiz ve en Redux-vari yolu, combineReducers<\/code> taraf\u0131ndan olu\u015fturulan ana reducer fonksiyonunu sarmalayarak, \u00f6zel bir “s\u0131f\u0131rlama” action’\u0131n\u0131 yakalamak ve bu action’a yan\u0131t olarak t\u00fcm state’i ba\u015flang\u0131\u00e7 durumuna d\u00f6nd\u00fcrmektir. Bu y\u00f6ntem, t\u00fcm Redux mimarisinin g\u00fcc\u00fcnden faydalan\u0131r ve minimum kod tekrar\u0131 ile maksimum esneklik sa\u011flar.<\/p>\n
Temel Fikir<\/h4>\n
combineReducers<\/code> fonksiyonu, kendisine ge\u00e7irilen reducer’lar\u0131 birle\u015ftirerek tek bir reducer fonksiyonu d\u00f6nd\u00fcr\u00fcr. Bu d\u00f6nd\u00fcr\u00fclen fonksiyon, (state, action)<\/code> imzas\u0131n\u0131 bekler ve \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda her bir alt reducer’\u0131 uygun state dilimi ve action ile \u00e7a\u011f\u0131r\u0131r, sonu\u00e7lar\u0131 birle\u015ftirir ve yeni bir state nesnesi d\u00f6nd\u00fcr\u00fcr.<\/p>\n
Ana fikir \u015fudur: E\u011fer \u00f6zel bir RESET_STATE<\/code> action’\u0131 al\u0131rsak, combineReducers<\/code> taraf\u0131ndan olu\u015fturulan appReducer<\/code> fonksiyonunu undefined<\/code> state ile \u00e7a\u011f\u0131raca\u011f\u0131z. Redux’ta bir reducer, undefined<\/code> state ile \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda, kendi initialState<\/code>‘ini d\u00f6nd\u00fcrmekle y\u00fck\u00fcml\u00fcd\u00fcr. Bu prensip, t\u00fcm alt reducer’lar\u0131n kendi ba\u015flang\u0131\u00e7 durumlar\u0131na d\u00f6nmesini otomatik olarak sa\u011flar.<\/p>\n
Ad\u0131m Ad\u0131m Uygulama<\/h4>\n
\u015eimdi bu zarif \u00e7\u00f6z\u00fcm\u00fc ad\u0131m ad\u0131m uygulayal\u0131m.<\/p>\n
Ad\u0131m 1: S\u0131f\u0131rlama Action Type’\u0131n\u0131 Tan\u0131mlay\u0131n<\/h5>\n
\u00d6ncelikle, t\u00fcm uygulamay\u0131 s\u0131f\u0131rlayacak benzersiz bir action type tan\u0131mlamam\u0131z gerekir.<\/p>\n
\/\/ src\/redux\/actionTypes.js\nexport const RESET_APP_STATE = 'RESET_APP_STATE';\n\n\/\/ Di\u011fer action tipleri...\nexport const LOGIN_SUCCESS = 'LOGIN_SUCCESS';\nexport const LOGOUT = 'LOGOUT';\nexport const FETCH_PRODUCTS_SUCCESS = 'FETCH_PRODUCTS_SUCCESS';<\/code><\/pre>\n
Ad\u0131m 2: S\u0131f\u0131rlama Action Creator’\u0131n\u0131 Olu\u015fturun<\/h5>\n
Bu action type’\u0131 dispatch etmek i\u00e7in basit bir action creator olu\u015ftural\u0131m.<\/p>\n
\/\/ src\/redux\/actions.js\nimport { RESET_APP_STATE, LOGIN_SUCCESS, LOGOUT, FETCH_PRODUCTS_SUCCESS } from '.\/actionTypes';\n\nexport const resetAppState = () => ({\n    type: RESET_APP_STATE\n});\n\nexport const loginSuccess = (profile) => ({\n    type: LOGIN_SUCCESS,\n    payload: profile\n});\n\nexport const logout = () => ({\n    type: LOGOUT\n});\n\nexport const fetchProductsSuccess = (products) => ({\n    type: FETCH_PRODUCTS_SUCCESS,\n    payload: products\n});<\/code><\/pre>\n
Ad\u0131m 3: Slice Reducer’lar\u0131n\u0131z\u0131 Olu\u015fturun (Ba\u015flang\u0131\u00e7 Durumlar\u0131yla)<\/h5>\n
Her reducer’\u0131n kendi ba\u015flang\u0131\u00e7 durumunu (initial state) net bir \u015fekilde tan\u0131mlamas\u0131 \u00e7ok \u00f6nemlidir. Bu, undefined<\/code> state ile \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda do\u011fru \u015fekilde s\u0131f\u0131rlanmalar\u0131n\u0131 sa\u011flar.<\/p>\n
\/\/ src\/redux\/reducers\/userReducer.js\nimport { LOGIN_SUCCESS, LOGOUT } from '..\/actionTypes';\n\nconst initialUserState = {\n    isAuthenticated: false,\n    profile: null,\n    loading: false,\n    error: null\n};\n\nconst userReducer = (state = initialUserState, action) => {\n    switch (action.type) {\n        case LOGIN_SUCCESS:\n            return { ...state, isAuthenticated: true, profile: action.payload, error: null };\n        case LOGOUT:\n            \/\/ Bu action sadece kendi dilimini s\u0131f\u0131rlayabilir, ancak global s\u0131f\u0131rlama i\u00e7in buna gerek yok.\n            \/\/ Yine de tutarl\u0131l\u0131k i\u00e7in b\u0131rak\u0131labilir.\n            return { ...initialUserState };\n        default:\n            return state;\n    }\n};\n\nexport default userReducer;\n\n\/\/ src\/redux\/reducers\/productReducer.js\nimport { FETCH_PRODUCTS_SUCCESS } from '..\/actionTypes';\n\nconst initialProductState = {\n    products: [],\n    selectedProduct: null,\n    loading: false\n};\n\nconst productReducer = (state = initialProductState, action) => {\n    switch (action.type) {\n        case FETCH_PRODUCTS_SUCCESS:\n            return { ...state, products: action.payload, loading: false };\n        \/\/ ... di\u011fer product action'lar\u0131\n        default:\n            return state;\n    }\n};\n\nexport default productReducer;\n\n\/\/ src\/redux\/reducers\/cartReducer.js\nconst initialCartState = {\n    items: [],\n    totalQuantity: 0,\n    totalPrice: 0\n};\n\nconst cartReducer = (state = initialCartState, action) => {\n    switch (action.type) {\n        case 'ADD_TO_CART':\n            \/\/ ... sepete ekleme mant\u0131\u011f\u0131\n            return { ...state, items: [...state.items, action.payload] };\n        case 'REMOVE_FROM_CART':\n            \/\/ ... sepetten \u00e7\u0131karma mant\u0131\u011f\u0131\n            return { ...state, items: state.items.filter(item => item.id !== action.payload) };\n        default:\n            return state;\n    }\n};\n\nexport default cartReducer;<\/code><\/pre>\n
Ad\u0131m 4: Root Reducer’\u0131 Modify Edin<\/h5>\n
Bu, \u00e7\u00f6z\u00fcm\u00fcn kalbidir. combineReducers<\/code> taraf\u0131ndan olu\u015fturulan ana reducer’\u0131 sarmalayaca\u011f\u0131z.<\/p>\n
\/\/ src\/redux\/reducers\/index.js\nimport { combineReducers } from 'redux';\nimport { RESET_APP_STATE } from '..\/actionTypes';\nimport userReducer from '.\/userReducer';\nimport productReducer from '.\/productReducer';\nimport cartReducer from '.\/cartReducer'; \/\/ Yeni eklenen reducer\n\n\/\/ T\u00fcm alt reducer'lar\u0131 birle\u015ftiren ana reducer'\u0131 olu\u015fturun\nconst appReducer = combineReducers({\n    user: userReducer,\n    products: productReducer,\n    cart: cartReducer \/\/ Yeni reducer'\u0131 ekle\n});\n\n\/\/ Root reducer'\u0131 tan\u0131mlay\u0131n\nconst rootReducer = (state, action) => {\n    \/\/ E\u011fer RESET_APP_STATE action'\u0131 gelirse\n    if (action.type === RESET_APP_STATE) {\n        \/\/ appReducer'\u0131 undefined state ile \u00e7a\u011f\u0131rarak t\u00fcm alt reducer'lar\u0131n\n        \/\/ kendi ba\u015flang\u0131\u00e7 durumlar\u0131na d\u00f6nmesini sa\u011flay\u0131n.\n        \/\/ Action'\u0131 da ge\u00e7irmek \u00f6nemlidir, baz\u0131 reducer'lar action'a ba\u011fl\u0131 olarak\n        \/\/ ba\u015flang\u0131\u00e7 durumu d\u00f6nd\u00fcrebilir (nadiren de olsa).\n        return appReducer(undefined, action);\n    }\n\n    \/\/ Di\u011fer t\u00fcm action'lar i\u00e7in normal appReducer'\u0131 \u00e7a\u011f\u0131r\u0131n\n    return appReducer(state, action);\n};\n\nexport default rootReducer;<\/code><\/pre>\n
Bu yap\u0131, RESET_APP_STATE<\/code> action’\u0131 dispatch edildi\u011finde, appReducer<\/code>‘\u0131n state<\/code> parametresine undefined<\/code> ge\u00e7irilmesini sa\u011flar. Bu, combineReducers<\/code>‘\u0131n her bir alt reducer’\u0131 undefined<\/code> state ile \u00e7a\u011f\u0131rmas\u0131na neden olur ve her alt reducer, kendi tan\u0131mlad\u0131\u011f\u0131 initialState<\/code>‘i d\u00f6nd\u00fcr\u00fcr. Sonu\u00e7 olarak, t\u00fcm Redux store, ilk y\u00fckleme an\u0131ndaki durumuna geri d\u00f6ner.<\/p>\n
Ad\u0131m 5: Store’u Olu\u015fturun<\/h5>\n
Standart Redux store kurulumunu yap\u0131n.<\/p>\n
\/\/ src\/redux\/store.js\nimport { createStore, applyMiddleware } from 'redux';\nimport { composeWithDevTools } from 'redux-devtools-extension'; \/\/ Redux DevTools i\u00e7in\nimport thunk from 'redux-thunk'; \/\/ Asenkron action'lar i\u00e7in\nimport rootReducer from '.\/reducers';\n\nconst middleware = [thunk];\n\nconst store = createStore(\n    rootReducer,\n    composeWithDevTools(applyMiddleware(...middleware))\n);\n\nexport default store;<\/code><\/pre>\n
Ad\u0131m 6: S\u0131f\u0131rlama Action’\u0131n\u0131 Dispatch Edin<\/h5>\n
\u015eimdi, uygulaman\u0131zda state’i s\u0131f\u0131rlamak istedi\u011finiz herhangi bir yerden resetAppState<\/code> action’\u0131n\u0131 dispatch edebilirsiniz. En yayg\u0131n senaryo, kullan\u0131c\u0131 \u00e7\u0131k\u0131\u015f yapt\u0131\u011f\u0131nda (logout) ger\u00e7ekle\u015fir.<\/p>\n
\/\/ src\/components\/LogoutButton.js\nimport React from 'react';\nimport { useDispatch } from 'react-redux';\nimport { resetAppState, logout } from '..\/redux\/actions'; \/\/ logout action'\u0131 da ekledik\n\nconst LogoutButton = () => {\n    const dispatch = useDispatch();\n\n    const handleLogout = () => {\n        \/\/ Redux state'ini s\u0131f\u0131rla\n        dispatch(resetAppState());\n\n        \/\/ Kullan\u0131c\u0131 oturumunu kapatma ile ilgili di\u011fer i\u015flemleri yap\n        \/\/ \u00d6rne\u011fin, localStorage'dan token'\u0131 sil, API'ye logout iste\u011fi g\u00f6nder vb.\n        \/\/ dispatch(logout()); \/\/ E\u011fer logout'un kendi reducer logic'i varsa \u00e7a\u011f\u0131r.\n        \/\/ Bu \u00f6rnekte resetAppState() zaten her \u015feyi s\u0131f\u0131rlayaca\u011f\u0131 i\u00e7in logout action'\u0131na gerek kalmaz.\n        \/\/ Ancak API taraf\u0131nda bir logout i\u015flemi varsa bu action yine de g\u00f6nderilebilir.\n        localStorage.removeItem('authToken');\n        console.log('Kullan\u0131c\u0131 \u00e7\u0131k\u0131\u015f yapt\u0131 ve Redux state s\u0131f\u0131rland\u0131.');\n        \/\/ Y\u00f6nlendirme vb.\n    };\n\n    return (\n