Ön Hazırlık ve Gereksinimler

Projeye başlamadan önce bilgisayarınızda Node.js'in güncel bir sürümünün (LTS) yüklü olduğundan emin olun. React projenizi oluşturduktan sonra gerekli bağımlılıkları yükleyerek işe başlayacağız.

Aşağıdaki komutları terminalinizde çalıştırarak projenize Redux Toolkit ve React-Redux kütüphanelerini dahil edebilirsiniz:

npm install @reduxjs/toolkit react-redux

Bu paketler, state yönetimi için gerekli olan configureStore, createSlice ve useSelector/useDispatch kancalarını (hooks) projenize kazandıracaktır.

Redux Store Yapılandırması

Redux Toolkit, store kurulumunu basitleştirmek için configureStore fonksiyonunu kullanır. Store, uygulamanızın tüm state'inin tutulduğu merkezi bir depodur.

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

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

Burada tanımladığımız counter anahtarı, state ağacındaki isimlendirmeyi belirler. reducer özelliği, uygulamanızdaki tüm alt modüllerin birleştirildiği yerdir.

Slice Oluşturma: Mantık ve State

Redux Toolkit'te "Slice", belirli bir özellik seti için gerekli olan reducer ve action'ları tek bir dosyada toplar. createSlice fonksiyonu, geleneksel Redux'taki "action type" ve "reducer" yazma zorunluluğunu ortadan kaldırır.

// src/features/counter/counterSlice.js
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;

RTK, arka planda Immer kütüphanesini kullanarak state'i doğrudan değiştiriyormuşsunuz gibi kod yazmanıza olanak tanır; aslında bu işlem güvenli bir şekilde yeni bir state kopyası oluşturur.

Provider ile Uygulamayı Sarmalama

Oluşturduğumuz store'u tüm React ağacına tanıtmak için Provider bileşenini kullanırız. Bu işlem genellikle main.jsx veya index.js dosyasında yapılır.

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

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

Bu sarmalama işlemi, uygulamanın en altındaki bileşenin bile store'a erişmesini sağlar.

React Bileşenlerinde State Kullanımı

State'i okumak için useSelector, state'i güncellemek (action tetiklemek) için ise useDispatch kancalarını kullanırız. Bu, React ile Redux arasındaki köprüdür.

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

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

  return (
    

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

Burada useSelector ile state'in bir kısmını seçiyoruz. useDispatch ile ise tanımladığımız increment veya decrement eylemlerini tetikliyoruz.

Redux Toolkit vs Klasik Redux

Güvenlik Uyarısı: Redux store içerisinde hassas kullanıcı verilerini (şifre, token vb.) tutarken dikkatli olun. State, tarayıcı hafızasında tutulduğu için "XSS" saldırılarına karşı savunmasız kalabilir. Hassas verileri mümkünse HTTP-only cookie içerisinde saklayın ve Redux'ı sadece uygulama akışı için kullanın.

Sıkça Sorulan Sorular

Redux Toolkit kullanmak zorunlu mu?

Hayır, küçük projelerde React'in kendi useContext yapısı yeterli olabilir. Ancak orta ve büyük ölçekli uygulamalarda hata ayıklama ve performans için RTK standarttır.

State'i neden doğrudan değiştiremiyoruz?

State'in değişmez (immutable) olması, React'in bileşeni ne zaman yeniden render etmesi gerektiğini anlamasını sağlar. RTK, bu karmaşayı arka planda yönetir.

Birden fazla slice nasıl eklenir?

configureStore içindeki reducer objesine yeni slice'larınızı ekleyerek kolayca genişletebilirsiniz.

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

RTK içerisinde createAsyncThunk kullanarak API isteklerinizi yönetebilir ve state'i buna göre güncelleyebilirsiniz.

Redux DevTools kullanmalı mıyım?

Kesinlikle. Tarayıcı eklentisi olan Redux DevTools, state değişimlerini zaman çizelgesinde görmenizi ve debug etmenizi sağlar.

Redux Toolkit ile Performans Optimizasyonu

Büyük ölçekli uygulamalarda, Redux state'inin gereksiz yere güncellenmesi veya bileşenlerin ihtiyaç duymadıkları veriler değiştiğinde tekrar render edilmesi performans sorunlarına yol açar. Redux Toolkit ile bu durumu yönetmek için memoization ve seçici (selector) kullanımı kritik öneme sahiptir.

Reselect ve createSelector Kullanımı

useSelector hook'u kullanılırken, state içinden sadece ihtiyacınız olan veriyi çekmek performans için hayati önem taşır. Eğer veriyi çekerken bir hesaplama yapıyorsanız, createSelector kullanarak bu hesaplamanın sadece ilgili veri değiştiğinde çalışmasını sağlayabilirsiniz.

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

const selectItems = (state) => state.cart.items;

export const selectTotalAmount = createSelector(
  [selectItems],
  (items) => items.reduce((total, item) => total + item.price, 0)
);

Bu yöntemle, cart.items dizisi değişmediği sürece totalAmount hesaplaması tekrar çalışmaz. Bu, özellikle karmaşık veri yapılarında React bileşenlerinizin gereksiz render edilmesini engeller.

Redux State Yönetiminde Test Stratejileri

Redux Toolkit, mantıksal birimlerin (slice) izole bir şekilde test edilmesini oldukça kolaylaştırır. Redux mantığı saf fonksiyonlardan (pure functions) oluştuğu için, karmaşık bir UI ortamına ihtiyaç duymadan birim testleri (unit tests) yazabilirsiniz.

Slice Reducer Testi

Reducer'larınızı test etmek için, mevcut state'i ve bir action'ı fonksiyona parametre olarak geçip, dönen sonucu beklenen değerle karşılaştırmanız yeterlidir.

import counterReducer from './counterSlice';

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

Entegre Testler için Wrapper Kullanımı

Bileşen testlerinde (örneğin Jest ve React Testing Library ile), Redux store'unu her test için yeniden oluşturmanız gerekir. Bunun için özel bir render fonksiyonu oluşturarak tüm testlerinizi bir Provider ile sarmalayabilirsiniz.

import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducer';

function renderWithRedux(
  ui,
  { preloadedState = {}, store = configureStore({ reducer: rootReducer, preloadedState }) } = {}
) {
  return {
    ...render({ui}),
    store,
  };
}

Bu yaklaşım, uygulamanızın farklı bölümlerinin Redux ile olan etkileşimini güvenli bir şekilde doğrulamanıza olanak tanır. Testlerinizi yazarken, özellikle asenkron işlemlerin (thunk) sonuçlarını simüle etmek için msw (Mock Service Worker) gibi kütüphanelerden faydalanmanız önerilir.

Sonuç

React ile Redux Toolkit kullanarak state yönetimi yapmak, uygulamanızın veri akışını öngörülebilir ve test edilebilir kılar. Bu rehberde öğrendiğiniz slice yapısı ve hooks kullanımı, modern React geliştirme dünyasının temel taşlarıdır. Bir sonraki adım olarak, createAsyncThunk ile sunucudan veri çekme işlemlerini inceleyerek projenizi bir üst seviyeye taşıyabilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamına (production) almadan önce kodlarınızı güvenlik testlerinden geçirin ve bağımlılıklarınızın güncelliğini düzenli olarak kontrol edin.