Ön Hazırlık ve Gereksinimler

Redux ile çalışmaya başlamadan önce bilgisayarınızda Node.js'in güncel bir sürümünün (LTS) yüklü olduğundan emin olmalısınız. Modern React projelerinde Redux'ı manuel yapılandırmak yerine, resmi olarak önerilen Redux Toolkit (RTK) kütüphanesini kullanacağız. RTK, boilerplate (gereksiz tekrar eden kod) miktarını azaltır ve en iyi pratikleri varsayılan olarak sunar.

Projenizi oluşturmak ve gerekli paketleri yüklemek için terminalinizde şu komutları çalıştırın:

npx create-react-app redux-projem
cd redux-projem
npm install @reduxjs/toolkit react-redux

Bu komutlar, React projenizi oluşturacak ve Redux Toolkit ile React-Redux kütüphanelerini projenize dahil edecektir. 2026 itibarıyla bu paketler, state yönetimi için endüstri standardı kabul edilmektedir.

Redux Store Yapılandırması

Redux'ın kalbi, uygulamanın tüm durumunu tutan "Store"dur. Store, uygulamanın durum ağacını barındıran tek bir kaynaktır. İlk adım olarak, bu depoyu oluşturmamız gerekiyor. Redux Toolkit'in configureStore fonksiyonu, geliştirme aşamasında hata ayıklama araçlarını otomatik olarak bağlar.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Burada configureStore kullanarak merkezi depomuzu tanımladık. reducer nesnesi, uygulamanızdaki farklı veri dilimlerini (slice) bir araya getirir. Bu yapı, projeniz büyüdükçe yeni modüller eklemenizi kolaylaştırır.

Slice Oluşturma ve State Mantığı

Redux Toolkit'te "Slice", belirli bir özellik için gereken reducer mantığını ve aksiyonları (actions) tek bir dosyada birleştirir. Geleneksel Redux'taki gibi aksiyon tiplerini ve reducer'ları ayrı ayrı yazmanıza gerek kalmaz.

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Burada createSlice kullanarak increment ve decrement fonksiyonlarını tanımladık. Dikkat ederseniz, state.value += 1 yazarken aslında mutasyon yapıyormuşuz gibi görünüyor; ancak Redux Toolkit perde arkasında Immer kütüphanesini kullanarak bunu güvenli bir şekilde günceller.

React Uygulamasına Provider ile Bağlama

Store'u oluşturduk ve slice'ları tanımladık. Şimdi, bu store'un tüm React bileşenleri tarafından erişilebilir olması gerekiyor. Bunun için react-redux kütüphanesinden gelen Provider bileşenini kullanacağız.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
  
);

Provider bileşeni, React Context API'sini kullanarak store'u tüm alt bileşen ağacına aktarır. Böylece herhangi bir bileşen, store'a doğrudan erişim sağlayabilir.

Bileşenlerde State Kullanımı (Hooks)

Redux state'ine erişmek için useSelector, state'i güncellemek için ise useDispatch hook'larını kullanırız. Bu, fonksiyonel bileşenlerde state yönetimini oldukça temiz hale getirir.

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './features/counter/counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    

      
Sayaç: {count}
       dispatch(increment())}>Artır
       dispatch(decrement())}>Azalt
    
  );
}

useSelector, store'daki veriyi okur ve veri değiştiğinde bileşeni yeniden render eder. dispatch ise, tanımladığımız aksiyonları tetikleyerek state güncellemelerini başlatır.

State Yönetim Yöntemlerinin Karşılaştırılması

Güvenlik Uyarısı: Redux store içerisinde asla hassas kullanıcı verilerini (şifreler, özel anahtarlar) şifrelenmemiş şekilde tutmayın. Redux devtools, geliştirme aşamasında tüm state'i görünür kılar; üretim (production) ortamında bu araçları devre dışı bıraktığınızdan emin olun.

Sıkça Sorulan Sorular

Redux her projede kullanılmalı mı?

Hayır. Eğer uygulamanız çok basitse ve bileşenler arası veri trafiği azsa, React'in kendi useContext yapısı yeterlidir. Redux, karmaşık state güncellemeleri ve büyük ekipler için önerilir.

Redux Toolkit neden öneriliyor?

Redux Toolkit, Redux'ın karmaşıklığını azaltmak için geliştirilmiştir. Daha az kod yazmanızı sağlar ve hatalı state mutasyonlarını önleyen yerleşik araçlarla gelir.

State güncellenmesine rağmen bileşen neden render olmuyor?

Bunun en yaygın sebebi, state'in immutability (değişmezlik) prensibine aykırı güncellenmesidir. Redux Toolkit kullandığınızdan ve doğrudan state ataması yapmadığınızdan emin olun.

Birden fazla slice nasıl yönetilir?

Store dosyanızdaki reducer nesnesine yeni slice'ları ekleyerek yönetebilirsiniz. Redux, tüm slice'ları birleştirerek tek bir state ağacı oluşturur.

Asenkron işlemler (API çağrıları) nasıl yapılır?

Redux Toolkit içerisinde yer alan createAsyncThunk fonksiyonu, API çağrıları gibi asenkron işlemleri yönetmek için en güvenli ve standart yoldur.

Redux Uygulamalarında Performans Optimizasyonu

Redux, büyük ölçekli uygulamalarda state yönetimini merkezileştirse de, yanlış yapılandırıldığında gereksiz yeniden render (re-render) işlemlerine yol açabilir. React bileşenlerinizin sadece ihtiyaç duydukları state parçaları değiştiğinde güncellenmesini sağlamak, uygulamanızın performansını doğrudan etkiler.

Selector Kullanımında Seçicilik

useSelector hook'u kullanılırken, tüm state nesnesini döndürmek yerine sadece ilgili parçayı döndürmek en iyi pratiktir. Eğer state nesnesinin tamamını dinlerseniz, state içindeki alakasız bir değişiklik bile bileşenin yeniden render edilmesine neden olur.

// Kötü pratik: State'in tamamını dinlemek
const user = useSelector((state) => state.user);

// İyi pratik: Sadece ihtiyaç duyulan alt dalı dinlemek
const userName = useSelector((state) => state.user.name);

Memoization ile Gereksiz Hesaplamaları Engelleme

State verisi üzerinde karmaşık filtreleme veya dönüşüm işlemleri yapıyorsanız, reselect kütüphanesini veya Redux Toolkit ile gelen createSelector fonksiyonunu kullanmalısınız. Bu, hesaplamanın yalnızca girdi verisi değiştiğinde tekrar çalışmasını sağlar.

import { createSelector } from '@reduxjs/toolkit';

const selectItems = (state) => state.shop.items;
const selectFilter = (state) => state.shop.filter;

export const selectVisibleItems = createSelector(
  [selectItems, selectFilter],
  (items, filter) => {
    return items.filter(item => item.category === filter);
  }
);

Redux State'ini Test Etme Stratejileri

Redux mantığınızın (reducer'lar ve thunk'lar) kararlılığını korumak için birim testleri (unit tests) yazmak kritik öneme sahiptir. Redux Toolkit, test yazımını kolaylaştıran bir yapı sunar.

Reducer Testleri

Reducer'lar saf fonksiyonlar (pure functions) olduğu için test edilmeleri oldukça basittir. Verilen bir başlangıç state'i ve aksiyon ile beklenen yeni state'i karşılaştırabilirsiniz.

import counterReducer from './counterSlice';

test('sayacı bir artırmalı', () => {
  const initialState = { value: 0 };
  const action = { type: 'counter/increment' };
  const state = counterReducer(initialState, action);
  expect(state.value).toEqual(1);
});

Entegrasyon Testlerinde Store Kullanımı

Bileşenlerinizi test ederken, gerçek bir Redux store'u ile sarmalanmış bir render fonksiyonu oluşturmak, uygulamanızın uçtan uca nasıl davrandığını anlamanıza yardımcı olur.

İpucu: Büyük ölçekli projelerde Redux DevTools eklentisini mutlaka kullanın. Bu araç, state değişimlerini zaman çizelgesi üzerinde izlemenize ve "time-travel debugging" ile geçmişteki state durumlarına dönmenize olanak tanır.

Sonuç

React ile Redux kullanarak state yönetimi yapmak, başlangıçta karmaşık görünse de Redux Toolkit ile oldukça sistematik bir sürece dönüşür. Bu rehberde, store kurulumundan bileşen içi kullanıma kadar temel adımları tamamladık. Bir sonraki adım olarak, createAsyncThunk kullanarak gerçek bir API'den veri çekmeyi ve bu verileri Redux ile yönetmeyi deneyebilirsiniz. Yazılım dünyasında sürekli öğrenme esastır; bu yapıyı projenizde uygulayarak kod kalitenizi bir üst seviyeye taşıyabilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Uygulamanızın güvenliği için her zaman en güncel kütüphane sürümlerini kullanın ve güvenlik açıklarına karşı (XSS, CSRF vb.) gerekli önlemleri almayı ihmal etmeyin.