Root Reducer Kullanarak Redux State’i Nasıl Sıfırlanır?

Root Reducer Kullanarak Redux State’i Nasıl Sıfırlanır?

Modern web uygulamaları, kullanıcı deneyimini zenginleştiren dinamik arayüzler ve karmaşık etkileşimlerle doludur. Bu tür uygulamalarda, uygulamanın durumunu (state) yönetmek, geliştirme sürecinin en kritik ve çoğu zaman en zorlu yönlerinden biridir. Özellikle tek sayfa uygulamaları (SPA’lar) bağlamında, uygulamanın farklı bileşenleri arasında tutarlı bir durum akışı sağlamak, ölçeklenebilir ve bakımı kolay bir kod tabanı oluşturmak için hayati öneme sahiptir. İşte bu noktada Redux gibi durum yönetim kütüphaneleri devreye girer.

Redux, JavaScript uygulamaları için tahmin edilebilir bir durum konteyneridir. Temel prensipleri olan tek bir doğruluk kaynağı (single source of truth), durumun okunabilir olması ve durumun yalnızca saf fonksiyonlar (reducers) aracılığıyla değiştirilebilmesi sayesinde, büyük ölçekli uygulamaların durumunu yönetmeyi önemli ölçüde kolaylaştırır. Ancak, uygulamanın yaşam döngüsü boyunca, bazen tüm uygulamanın durumunu veya belirli bir bölümünü tamamen sıfırlama ihtiyacı doğar. Bu makalede, bir Redux uygulamasının tüm durumunu (state) bir “root reducer” kullanarak nasıl etkin ve zarif bir şekilde sıfırlayacağımızı detaylı bir şekilde inceleyeceğiz.

Redux Durum Yönetimine Giriş ve Sıfırlama İhtiyacı

Redux, uygulamanızın global durumunu merkezi bir yerde, yani “store” içinde tutar. Bu durum, “action” adı verilen basit JavaScript nesneleri aracılığıyla tetiklenen “reducer” adı verilen saf fonksiyonlar tarafından değiştirilir. Bu yapı, durum değişikliklerini öngörülebilir ve izlenebilir hale getirir.

Peki, Redux state’ini sıfırlama ihtiyacı neden ortaya çıkar? Birkaç yaygın senaryo şunlardır:

* Kullanıcı Oturumunu Kapatma (Logout): Bir kullanıcı uygulamadan çıkış yaptığında, o kullanıcıya ait tüm verilerin (kullanıcı profili, sepet içeriği, kişisel ayarlar vb.) Redux state’inden temizlenmesi gerekir. Aksi takdirde, bir sonraki kullanıcı veya aynı kullanıcının yeni bir oturumunda yanlış veya eski verilerle karşılaşılabilir.
* Kullanıcı Değişimi: Çok kullanıcılı bir sistemde, bir kullanıcının oturumu kapanıp başka bir kullanıcı giriş yaptığında, önceki kullanıcının verilerinin tamamen silinmesi ve yeni kullanıcının verileriyle doldurulması gerekir.
* Uygulama İçi “Sıfırla” Fonksiyonları: Bazen, bir formun veya belirli bir özelliğin durumunu başlangıç ayarlarına döndürmek için bir “Sıfırla” düğmesi gerekebilir.
* Test Ortamları: Uygulamanın farklı test senaryolarını çalıştırmak için her testten önce temiz bir durumla başlamak önemlidir.
* Hata Kurtarma: Kritik bir hata durumunda, uygulamanın bilinen iyi bir duruma dönmesi için state’in sıfırlanması bir seçenek olabilir.

Bu senaryolarda, Redux state’ini etkili bir şekilde sıfırlamak, hem güvenlik hem de kullanıcı deneyimi açısından kritik öneme sahiptir.

Redux Temelleri ve Root Reducer Kavramı

Redux state’ini sıfırlama mekanizmasını anlamak için, Redux’ın temel yapı taşlarını ve özellikle combineReducers fonksiyonunun rolünü hatırlamak önemlidir.

Redux’ın Ana Bileşenleri

* Store: Uygulamanızın tüm durumunu barındıran tek bir JavaScript nesnesidir.
* Action: Uygulamada meydana gelen olayları tanımlayan basit JavaScript nesneleridir. Minimum bir type özelliğine sahiptirler (örn. { type: 'ADD_TODO', payload: 'Learn Redux' }).
* Reducer: Mevcut durumu ve bir action’ı alarak yeni durumu döndüren saf fonksiyonlardır. Reducer’lar asla doğrudan durumu değiştirmezler; her zaman durumun değiştirilmiş bir kopyasını döndürürler.
* Dispatch: Bir action’ı store’a gönderme yöntemidir. Action, store’a ulaştığında, reducer’lar tarafından işlenir.

CombineReducers ve Root Reducer

Büyük uygulamalarda, tüm durumu tek bir reducer içinde yönetmek pratik değildir. Redux, durumu mantıksal dilimlere (slice) ayırmamızı ve her dilim için ayrı bir reducer yazmamızı teşvik eder. Örneğin, bir userReducer, bir productReducer, bir cartReducer vb. olabilir.

combineReducers fonksiyonu, bu bağımsız reducer’ları tek bir “root reducer” altında birleştirmek için kullanılır. combineReducers‘a bir nesne geçirirsiniz; bu nesnenin anahtarları state’inizin bir bölümüne karşılık gelir ve değerleri ilgili reducer fonksiyonlarıdır.

// userReducer.js
const initialUserState = {
    isAuthenticated: false,
    profile: null,
    loading: false,
    error: null
};

const userReducer = (state = initialUserState, action) => {
    switch (action.type) {
        case 'LOGIN_SUCCESS':
            return { ...state, isAuthenticated: true, profile: action.payload, error: null };
        case 'LOGOUT':
            return { ...initialUserState }; // Bu sadece kendi dilimini sıfırlar
        default:
            return state;
    }
};

export default userReducer;

// productReducer.js
const initialProductState = {
    products: [],
    selectedProduct: null,
    loading: false
};

const productReducer = (state = initialProductState, action) => {
    switch (action.type) {
        case 'FETCH_PRODUCTS_SUCCESS':
            return { ...state, products: action.payload, loading: false };
        case 'SELECT_PRODUCT':
            return { ...state, selectedProduct: action.payload };
        default:
            return state;
    }
};

export default productReducer;

// rootReducer.js
import { combineReducers } from 'redux';
import userReducer from './userReducer';
import productReducer from './productReducer';

const rootReducer = combineReducers({
    user: userReducer,
    products: productReducer
});

export default rootReducer;

Bu yapı, state’in user ve products gibi anahtarlarla erişilebilen bölümlere ayrılmasını sağlar. rootReducer ise tüm bu bölümleri yöneten ana fonksiyondur.

Redux State’ini Sıfırlamak İçin İlk Yaklaşımlar (ve Neden Yetersiz Kalabilirler)

Redux state’ini sıfırlama ihtiyacı doğduğunda, akla gelebilecek ilk birkaç yöntem olabilir. Ancak bu yöntemler genellikle büyük ve karmaşık uygulamalarda yetersiz kalır veya bakımı zorlaştırır.

1. Her Reducer İçin Ayrı Bir Sıfırlama Action’ı ve Logic’i

Bu yaklaşımda, her reducer kendi dilimini sıfırlamak için özel bir action type (örn. RESET_USER_STATE, RESET_PRODUCT_STATE) dinler ve kendi initialState‘ini döndürür.

// userReducer.js
const userReducer = (state = initialUserState, action) => {
    switch (action.type) {
        // ... diğer action'lar
        case 'RESET_USER_STATE':
            return { ...initialUserState };
        default:
            return state;
    }
};

// productReducer.js
const productReducer = (state = initialProductState, action) => {
    switch (action.type) {
        // ... diğer action'lar
        case 'RESET_PRODUCT_STATE':
            return { ...initialProductState };
        default:
            return state;
    }
};

Dezavantajları:

* Tekrar: Her yeni reducer eklediğinizde, ona özel bir sıfırlama action’ı ve logic’i eklemeniz gerekir. Bu, kod tekrarına yol açar.
* Koordinasyon: Tüm state’i sıfırlamak istediğinizde, tüm bu action’ları tek tek dispatch etmeniz gerekir. Bu, bir logout fonksiyonunda birden fazla dispatch çağrısı anlamına gelir ve bir action’ı unutmak kolaydır.
* Hata Potansiyeli: Yeni bir reducer eklemeyi unutup ona sıfırlama logic’i eklemezseniz, o bölüm sıfırlanmayacaktır.

2. Root Reducer’da Her Dilimin Initial State’ini Manuel Olarak Döndürme

Bu yaklaşımda, root reducer’da özel bir sıfırlama action’ı dinlenir ve bu action geldiğinde, her dilimin initialState‘i manuel olarak bir nesne içinde birleştirilerek döndürülür.

// rootReducer.js
import { combineReducers } from 'redux';
import userReducer, { initialUserState } from './userReducer'; // initialState'i import et
import productReducer, { initialProductState } from './productReducer'; // initialState'i import et

const appReducer = combineReducers({
    user: userReducer,
    products: productReducer
});

const rootReducer = (state, action) => {
    if (action.type === 'RESET_APP_STATE') {
        // Her reducer'ın initial state'ini manuel olarak birleştirme
        return {
            user: initialUserState,
            products: initialProductState
        };
    }
    return appReducer(state, action);
};

export default rootReducer;

Dezavantajları:

* Bağımlılık: rootReducer, her bir alt reducer’ın initialState‘ine doğrudan bağımlı hale gelir. Bu, alt reducer’ların initialState‘ini değiştirdiğinizde rootReducer‘ı da güncellemeniz gerektiği anlamına gelir.
* Bakım Zorluğu: Yeni bir reducer eklediğinizde veya mevcut bir reducer’ı kaldırdığınızda, rootReducer‘ı manuel olarak güncellemeniz gerekir. Bu, büyük uygulamalarda sürdürülemez hale gelir.
* Tekrar: Yine kod tekrarı mevcuttur ve hata yapma olasılığı yüksektir.

Bu yaklaşımların her ikisi de, Redux’ın “tek bir doğruluk kaynağı” ve “modülerlik” felsefesine tam olarak uymayan, merkezi olmayan veya bakımı zor çözümler sunar. Daha zarif ve ölçeklenebilir bir çözüm, combineReducers‘ın kendisini kullanarak root reducer seviyesinde bir sıfırlama mekanizması oluşturmaktır.

Root Reducer Kullanarak Redux State’ini Sıfırlama: Zarif Çözüm

Redux state’ini sıfırlamanın en temiz ve en Redux-vari yolu, combineReducers tarafından oluşturulan ana reducer fonksiyonunu sarmalayarak, özel bir “sıfırlama” action’ını yakalamak ve bu action’a yanıt olarak tüm state’i başlangıç durumuna döndürmektir. Bu yöntem, tüm Redux mimarisinin gücünden faydalanır ve minimum kod tekrarı ile maksimum esneklik sağlar.

Temel Fikir

combineReducers fonksiyonu, kendisine geçirilen reducer’ları birleştirerek tek bir reducer fonksiyonu döndürür. Bu döndürülen fonksiyon, (state, action) imzasını bekler ve çağrıldığında her bir alt reducer’ı uygun state dilimi ve action ile çağırır, sonuçları birleştirir ve yeni bir state nesnesi döndürür.

Ana fikir şudur: Eğer özel bir RESET_STATE action’ı alırsak, combineReducers tarafından oluşturulan appReducer fonksiyonunu undefined state ile çağıracağız. Redux’ta bir reducer, undefined state ile çağrıldığında, kendi initialState‘ini döndürmekle yükümlüdür. Bu prensip, tüm alt reducer’ların kendi başlangıç durumlarına dönmesini otomatik olarak sağlar.

Adım Adım Uygulama

Şimdi bu zarif çözümü adım adım uygulayalım.

Adım 1: Sıfırlama Action Type’ını Tanımlayın

Öncelikle, tüm uygulamayı sıfırlayacak benzersiz bir action type tanımlamamız gerekir.

// src/redux/actionTypes.js
export const RESET_APP_STATE = 'RESET_APP_STATE';

// Diğer action tipleri...
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGOUT = 'LOGOUT';
export const FETCH_PRODUCTS_SUCCESS = 'FETCH_PRODUCTS_SUCCESS';

Adım 2: Sıfırlama Action Creator’ını Oluşturun

Bu action type’ı dispatch etmek için basit bir action creator oluşturalım.

// src/redux/actions.js
import { RESET_APP_STATE, LOGIN_SUCCESS, LOGOUT, FETCH_PRODUCTS_SUCCESS } from './actionTypes';

export const resetAppState = () => ({
    type: RESET_APP_STATE
});

export const loginSuccess = (profile) => ({
    type: LOGIN_SUCCESS,
    payload: profile
});

export const logout = () => ({
    type: LOGOUT
});

export const fetchProductsSuccess = (products) => ({
    type: FETCH_PRODUCTS_SUCCESS,
    payload: products
});

Adım 3: Slice Reducer’larınızı Oluşturun (Başlangıç Durumlarıyla)

Her reducer’ın kendi başlangıç durumunu (initial state) net bir şekilde tanımlaması çok önemlidir. Bu, undefined state ile çağrıldığında doğru şekilde sıfırlanmalarını sağlar.

// src/redux/reducers/userReducer.js
import { LOGIN_SUCCESS, LOGOUT } from '../actionTypes';

const initialUserState = {
    isAuthenticated: false,
    profile: null,
    loading: false,
    error: null
};

const userReducer = (state = initialUserState, action) => {
    switch (action.type) {
        case LOGIN_SUCCESS:
            return { ...state, isAuthenticated: true, profile: action.payload, error: null };
        case LOGOUT:
            // Bu action sadece kendi dilimini sıfırlayabilir, ancak global sıfırlama için buna gerek yok.
            // Yine de tutarlılık için bırakılabilir.
            return { ...initialUserState };
        default:
            return state;
    }
};

export default userReducer;

// src/redux/reducers/productReducer.js
import { FETCH_PRODUCTS_SUCCESS } from '../actionTypes';

const initialProductState = {
    products: [],
    selectedProduct: null,
    loading: false
};

const productReducer = (state = initialProductState, action) => {
    switch (action.type) {
        case FETCH_PRODUCTS_SUCCESS:
            return { ...state, products: action.payload, loading: false };
        // ... diğer product action'ları
        default:
            return state;
    }
};

export default productReducer;

// src/redux/reducers/cartReducer.js
const initialCartState = {
    items: [],
    totalQuantity: 0,
    totalPrice: 0
};

const cartReducer = (state = initialCartState, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
            // ... sepete ekleme mantığı
            return { ...state, items: [...state.items, action.payload] };
        case 'REMOVE_FROM_CART':
            // ... sepetten çıkarma mantığı
            return { ...state, items: state.items.filter(item => item.id !== action.payload) };
        default:
            return state;
    }
};

export default cartReducer;

Adım 4: Root Reducer’ı Modify Edin

Bu, çözümün kalbidir. combineReducers tarafından oluşturulan ana reducer’ı sarmalayacağız.

// src/redux/reducers/index.js
import { combineReducers } from 'redux';
import { RESET_APP_STATE } from '../actionTypes';
import userReducer from './userReducer';
import productReducer from './productReducer';
import cartReducer from './cartReducer'; // Yeni eklenen reducer

// Tüm alt reducer'ları birleştiren ana reducer'ı oluşturun
const appReducer = combineReducers({
    user: userReducer,
    products: productReducer,
    cart: cartReducer // Yeni reducer'ı ekle
});

// Root reducer'ı tanımlayın
const rootReducer = (state, action) => {
    // Eğer RESET_APP_STATE action'ı gelirse
    if (action.type === RESET_APP_STATE) {
        // appReducer'ı undefined state ile çağırarak tüm alt reducer'ların
        // kendi başlangıç durumlarına dönmesini sağlayın.
        // Action'ı da geçirmek önemlidir, bazı reducer'lar action'a bağlı olarak
        // başlangıç durumu döndürebilir (nadiren de olsa).
        return appReducer(undefined, action);
    }

    // Diğer tüm action'lar için normal appReducer'ı çağırın
    return appReducer(state, action);
};

export default rootReducer;

Bu yapı, RESET_APP_STATE action’ı dispatch edildiğinde, appReducer‘ın state parametresine undefined geçirilmesini sağlar. Bu, combineReducers‘ın her bir alt reducer’ı undefined state ile çağırmasına neden olur ve her alt reducer, kendi tanımladığı initialState‘i döndürür. Sonuç olarak, tüm Redux store, ilk yükleme anındaki durumuna geri döner.

Adım 5: Store’u Oluşturun

Standart Redux store kurulumunu yapın.

// src/redux/store.js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension'; // Redux DevTools için
import thunk from 'redux-thunk'; // Asenkron action'lar için
import rootReducer from './reducers';

const middleware = [thunk];

const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

Adım 6: Sıfırlama Action’ını Dispatch Edin

Şimdi, uygulamanızda state’i sıfırlamak istediğiniz herhangi bir yerden resetAppState action’ını dispatch edebilirsiniz. En yaygın senaryo, kullanıcı çıkış yaptığında (logout) gerçekleşir.

// src/components/LogoutButton.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { resetAppState, logout } from '../redux/actions'; // logout action'ı da ekledik

const LogoutButton = () => {
    const dispatch = useDispatch();

    const handleLogout = () => {
        // Redux state'ini sıfırla
        dispatch(resetAppState());

        // Kullanıcı oturumunu kapatma ile ilgili diğer işlemleri yap
        // Örneğin, localStorage'dan token'ı sil, API'ye logout isteği gönder vb.
        // dispatch(logout()); // Eğer logout'un kendi reducer logic'i varsa çağır.
        // Bu örnekte resetAppState() zaten her şeyi sıfırlayacağı için logout action'ına gerek kalmaz.
        // Ancak API tarafında bir logout işlemi varsa bu action yine de gönderilebilir.
        localStorage.removeItem('authToken');
        console.log('Kullanıcı çıkış yaptı ve Redux state sıfırlandı.');
        // Yönlendirme vb.
    };

    return (
        Çıkış Yap
    );
};

export default LogoutButton;

Bu örnekte, handleLogout fonksiyonu çağrıldığında resetAppState() action’ı dispatch edilir. Bu, rootReducer tarafından yakalanır ve tüm uygulamanın durumu başlangıç değerlerine sıfırlanır.

Bu Yaklaşımın Avantajları

Root reducer aracılığıyla state sıfırlama, bir dizi önemli avantaj sunar:

* Merkezi Kontrol: Tüm uygulamanın durumunu tek bir noktadan sıfırlama yeteneği sağlar. Bu, kodun daha düzenli ve anlaşılır olmasını sağlar.
* Kod Tekrarını Önler: Her bir reducer için ayrı sıfırlama logic’i yazmaktan veya her reducer’ın initialState‘ini manuel olarak yönetmekten kurtulursunuz. Yeni bir reducer eklendiğinde, sıfırlama logic’ini güncellemenize gerek kalmaz; sadece combineReducers‘a eklemeniz yeterlidir.
* Modülerlik ve Ölçeklenebilirlik: Her reducer kendi initialState‘ini tanımlar ve yalnızca kendi diliminden sorumludur. rootReducer ise bu modüler yapıyı bozmadan global bir sıfırlama mekanizması sunar. Uygulama büyüdükçe bu yaklaşım kolayca ölçeklenir.
* Tutarlılık: Tüm state’in eş zamanlı ve doğru bir şekilde sıfırlanmasını garanti eder. Hiçbir state diliminin gözden kaçırılmamasını sağlar.
* Bakım Kolaylığı: Yeni geliştiricilerin projeye adapte olması daha kolaydır çünkü state sıfırlama mekanizması açık ve standarttır.

Dikkat Edilmesi Gerekenler ve En İyi Uygulamalar

Bu güçlü sıfırlama mekanizmasını kullanırken bazı noktaları göz önünde bulundurmak önemlidir:

* initialState Tanımları: Her reducer’ın kendi initialState‘ini doğru ve eksiksiz bir şekilde tanımladığından emin olun. undefined state ile çağrıldığında reducer’ın bu başlangıç durumunu döndürmesi kritik öneme sahiptir.
* Yan Etkiler (Side Effects): Redux state’ini sıfırlamak, Redux store’u temizler, ancak tarayıcının localStorage, sessionStorage gibi depolama alanlarındaki verileri veya API çağrıları gibi devam eden asenkron işlemleri etkilemez. Kullanıcı çıkışı gibi durumlarda, bu yan etkileri de manuel olarak temizlemeniz veya iptal etmeniz gerekebilir (örn. localStorage.removeItem('authToken'), devam eden API isteklerini iptal etme).
* Persist Durumu: Eğer redux-persist gibi bir kütüphane kullanıyorsanız, RESET_APP_STATE action’ı dispatch edildiğinde, persist edilen state’in de doğru şekilde temizlendiğinden emin olmanız gerekir. redux-persist genellikle bir PURGE action’ı veya özel bir transform ile bu durumu yönetmek için yollar sunar. Genellikle, RESET_APP_STATE action’ı dispatch edildikten sonra redux-persist‘in PURGE action’ını da dispatch etmek en iyi uygulama olabilir.
* Performans: Çok büyük bir state’i sıfırlamak teorik olarak küçük bir performans maliyeti getirebilir, ancak modern donanım ve JavaScript motorları göz önüne alındığında, çoğu uygulama için bu ihmal edilebilir düzeydedir.
* Test Edilebilirlik: Bu sıfırlama mekanizmasını birim ve entegrasyon testlerinizde kolayca test edebilirsiniz. Bir test senaryosundan sonra resetAppState() action’ını dispatch ederek uygulamanın temiz bir duruma döndüğünü doğrulayabilirsiniz.

// Örnek test senaryosu (jest/testing-library ile)
import { render, screen, fireEvent } from '@testing-library/react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from '../redux/reducers';
import LogoutButton from '../components/LogoutButton';
import App from '../App'; // Uygulamanızın ana bileşeni

describe('Logout functionality', () => {
    let store;

    beforeEach(() => {
        store = createStore(rootReducer);
        // Testten önce initial state'i doldur
        store.dispatch({ type: 'LOGIN_SUCCESS', payload: { name: 'Test User' } });
        store.dispatch({ type: 'ADD_TO_CART', payload: { id: 1, name: 'Product A' } });
        // localStorage'ı da mock'layabilirsiniz
        Object.defineProperty(window, 'localStorage', {
            value: {
                removeItem: jest.fn(),
                setItem: jest.fn(),
                getItem: jest.fn(),
                clear: jest.fn(),
            },
            writable: true,
        });
    });

    test('resets Redux state and clears local storage on logout', () => {
        render(
            
                 {/ App bileşeninizde LogoutButton olduğunu varsayalım /}
                
            
        );

        // State'in dolu olduğunu doğrula
        expect(store.getState().user.isAuthenticated).toBe(true);
        expect(store.getState().cart.items.length).toBe(1);

        // Çıkış yap düğmesine tıkla
        fireEvent.click(screen.getByText(/Çıkış Yap/i));

        // Redux state'inin sıfırlandığını doğrula
        expect(store.getState().user.isAuthenticated).toBe(false);
        expect(store.getState().user.profile).toBe(null);
        expect(store.getState().cart.items.length).toBe(0);

        // localStorage'ın temizlendiğini doğrula
        expect(window.localStorage.removeItem).toHaveBeenCalledWith('authToken');
    });
});

Sonuç

Redux, modern web uygulamalarında durum yönetimini basitleştiren güçlü bir kütüphanedir. Ancak, uygulamanın yaşam döngüsü boyunca, tüm Redux state’ini temiz ve etkili bir şekilde sıfırlamak için iyi düşünülmüş bir mekanizma gereklidir. Bu makalede ele aldığımız root reducer’ı sarmalama yaklaşımı, bu ihtiyacı karşılamanın en zarif, ölçeklenebilir ve Redux felsefesine uygun yoludur.

combineReducers tarafından oluşturulan ana reducer’ı özel bir RESET_APP_STATE action’ı ile undefined state ile çağırmak, tüm alt reducer’ların kendi başlangıç durumlarına dönmesini sağlayarak, uygulamanın durumunu merkezi ve tutarlı bir şekilde sıfırlar. Bu yöntem, kod tekrarını önler, bakımı kolaylaştırır ve uygulamanızın daha güvenli ve öngörülebilir olmasını sağlar. Doğru initialState tanımları ve yan etkilerin yönetimi ile birlikte kullanıldığında, bu yaklaşım Redux uygulamalarınızda state sıfırlama sorununu kalıcı olarak çözer.