Redux - Nasıl Çalışır, Artıları ve Eksileri

Redux, JavaScript uygulamalarında merkezi bir state yönetim kütüphanesidir ve genellikle büyük ölçekli React projelerinde kullanılır. Redux'ta tüm uygulamanın durumu tek bir store'da tutulur. Uygulama durumu action adı verilen nesnelerle güncellenir ve bu işlemler reducer adı verilen saf fonksiyonlar tarafından işlenir. dispatch ile action'lar store'a gönderilir, böylece state güncellenir ve bileşenler yeniden render edilir.

Artıları arasında merkezi state yönetimi, tahmin edilebilirlik, DevTools desteği ve büyük projelerde ölçeklenebilirlik yer alır. Eksileri ise gereksiz karmaşıklık, öğrenme eğrisi ve yanlış kullanımda performans sorunları olarak sıralanabilir. Redux, büyük ve karmaşık projelerde faydalıdır, ancak her projede kullanılması gerekmeyebilir.

Redux’ın Temel Kavramları

1. Store: Redux’ta tüm uygulamanın durumunu tutan merkezi bir depo (store) vardır. Uygulamadaki tüm bileşenler bu store’dan durumu alır ve günceller.

2. Action: Action, store’daki durumu değiştirmek için kullanılan saf bir JavaScript nesnesidir. Bir type alanı ve isteğe bağlı olarak bir payload (taşıyıcı) içerir.

   const incrementAction = {
       type: 'INCREMENT',
       payload: 1
   };
   

    

3. Reducer: Reducer, bir action'a göre store'daki durumu güncelleyen saf bir fonksiyondur. Her reducer, belirli bir state dilimini yönetir.

   const counterReducer = (state = 0, action) => {
       switch (action.type) {
           case 'INCREMENT':
               return state + action.payload;
           case 'DECREMENT':
               return state - action.payload;
           default:
               return state;
       }
   };
   

    

4. Dispatch: Dispatch, bir action'ı store'a göndermek için kullanılır. Dispatch edilen action, store'daki ilgili reducer’a iletilir ve durum güncellenir.

5. Selectors: State'teki belirli verilere erişmek için kullanılır. Selectors, store'dan veri çekmenin temiz ve yeniden kullanılabilir bir yoludur.

Redux’ın Çalışma Prensibi

Redux, tek yönlü veri akışı prensibiyle çalışır. Yani, veri aşağıdan yukarıya doğru akmaz. Redux veri akışı şu şekildedir:

1. Action Dispatch: Bir bileşen ya da başka bir kaynaktan bir action dispatch edilir.
2. Reducer: Bu action ilgili reducer tarafından işlenir ve yeni bir state oluşturulur.
3. Store Güncellemesi: Reducer tarafından döndürülen yeni state, store'daki mevcut state'in yerini alır.
4. Bileşen Güncellemesi: Store’daki state güncellendiğinde, bu state’e bağlı olan bileşenler de yeniden render edilir.

Örneklerle Redux

Adım 1: Redux Kurulumu

Öncelikle, Redux ve React-Redux kütüphanelerini projeye eklemek gerekiyor:

npm install redux react-redux

Adım 2: Store Oluşturma

import { createStore } from 'redux';

// Basit bir reducer oluşturuyoruz
const initialState = {
    counter: 0
};

const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { ...state, counter: state.counter + 1 };
        case 'DECREMENT':
            return { ...state, counter: state.counter - 1 };
        default:
            return state;
    }
};

// Store'u oluşturuyoruz
const store = createStore(counterReducer);

Adım 3: Bileşenlerde Kullanım

Redux store'u bileşenlerde kullanmak için Provider bileşeni ve useSelector, useDispatch hook'ları kullanılır.

import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { createStore } from 'redux';

// Daha önce oluşturduğumuz reducer ve store
const store = createStore(counterReducer);

const CounterComponent = () => {
    const counter = useSelector(state => state.counter);
    const dispatch = useDispatch();

    return (
        <div>
            <h1>Counter: {counter}</h1>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
        </div>
    );
};

function App() {
    return (
        <Provider store={store}>
            <CounterComponent />
        </Provider>
    );
}

export default App;

Redux’ın Artıları ve Eksileri

Artıları:

1. Merkezi State Yönetimi: Uygulamanın durumu merkezi bir store’da toplandığı için, hangi bileşenin hangi state verisini kullandığı kolayca takip edilebilir.
2. Tahmin Edilebilirlik: Redux’un saf fonksiyonlar (reducers) kullanması ve tek yönlü veri akışı, uygulama davranışını tahmin edilebilir kılar.
3. DevTools Desteği: Redux DevTools ile state ve action'ları zaman içerisinde izlemek ve hata ayıklamak kolaydır.
4. Büyük Uygulamalarda Ölçeklenebilirlik: Özellikle büyük ölçekli projelerde, state yönetimini daha düzenli ve kontrol edilebilir hale getirir.

Eksileri:

1. Karmaşıklık: Redux, küçük projelerde gereksiz bir karmaşıklık yaratabilir. Her action ve state değişikliği için çok fazla boilerplate kod yazmak gerekebilir.
2. Öğrenme Eğrisi: Redux’ın yapısı ve felsefesi, özellikle yeni başlayanlar için öğrenmesi zor olabilir.
3. Verimlilik Sorunları: Yanlış kullanıldığında, gereksiz render işlemlerine yol açabilir ve performans sorunlarına neden olabilir.

Redux, özellikle büyük ve karmaşık uygulamalarda state yönetimini kontrol altına almak için güçlü bir araçtır. Ancak, her projede kullanılması gerektiği anlamına gelmez. Projenin ölçeği ve karmaşıklığına göre, Redux’ın kullanılıp kullanılmayacağına karar vermek önemlidir.

Redux Toolkit Nedir? Öğrenmek için tıklayın.