React Dünyasında Durum Yönetimi: Redux Toolkit ve Redux’un Karşılaştırmalı Analizi

Redux vs Redux Toolkit

Redux ve Redux Toolkit, React uygulamalarında durum yönetimi için kullanılan popüler kütüphanelerdir. Redux, Dan Abramov ve Andrew Clark tarafından yaratılmıştır ve 2015 yılında Dan Abramov’un “React Europe” konferansında ilk kez tanıtılmıştır. Redux, uygulamanın durumunu (state) merkezi bir depoda (store) tutarak, uygulamanın farklı bölümleri arasında durum paylaşımını kolaylaştırır. Redux Toolkit ise Redux’ın kullanımını daha basit ve etkili hale getirmek için tasarlanmıştır.

Aşağıda Redux ve Redux Toolkit’in temel kavramlarını açıklayan şemalar, kod örnekleri ve açıklamalar bulunmaktadır.

React ile bir proje başlattıktan sonra Redux’u yeni bir projede kullanmak için bağımlılıkları yükleme işlemini gerçekleştirin:

npm install @reduxjs/toolkit react-redux

1. @reduxjs/toolkit:Redux yapısını basitleştiren ve geliştiren araçlar ve fonksiyonlar sunar. “Slices” (reducer’lar ve action’lar) tanımlamak, Redux store’unu yapılandırmak gibi işlemleri içerir.
2. react-redux: Redux store’unu React bileşenlerine bağlamak için gerekli araçları (hooks ve context) sağlar.

1. Redux Nedir?

Redux Mimarisi:

• Store: Uygulamanın tüm durumunun (state) saklandığı yerdir.
• Action: Durumu değiştirmek istediğimizde gönderdiğimiz sinyallerdir. Genellikle bir tip (type) ve bazen veri (payload) içerir.
• Reducer: Action’ların nasıl işleneceğini tanımlayan fonksiyonlardır. Reducer’lar, mevcut durumu ve bir action alıp, yeni bir durum döndürür.

Redux Akışı:

1. Kullanıcı arayüzünden bir eylem tetiklenir.
2. Bu eylem bir action oluşturur.
3. Action, reducer’a gönderilir.
4. Reducer, mevcut durumu ve action’ı işleyerek yeni bir durum üretir.
5. Store güncellenir ve UI bu yeni duruma göre yeniden render edilir.

2. Redux Toolkit Nedir?

Redux Toolkit, Redux kullanımını basitleştiren ve standartlaştıran bir set sunar. Aşağıdaki özellikleri içerir:

• configureStore: Store oluşturmayı ve yapılandırmayı kolaylaştırır.
• createReducer: Reducer yazmayı basitleştirir ve Immer kütüphanesini kullanarak doğrudan durum üzerinde değişiklik yapmayı sağlar.
• createAction: Action tanımlamayı basitleştirir.
• createSlice: Birden fazla reducer ve ilgili action’ları tek bir yerde tanımlamayı sağlar.
• Slices: Redux Toolkit’teki bir slice, bir redüktörün (reducer) ve tek bir yapıda birbiriyle ilişkili eylemlerin bir kombinasyonudur. Bu slice, uygulamanın küresel mevcut durumunun özel bir bölümünü temsil eder. Dilimler, createSlice işlevi kullanılarak oluşturulur.
• createAsyncThunk: Asenkron işlemler için thunk’ları oluşturmayı kolaylaştırır.

Ayrıca, kitaplığın react-redux kavramları da şöyle:

1. Provider (Sağlayıcı) : Üst düzeydeki uygulamayı kapsamak için kullanılacak orantılı bir bileşen . Redux deposu ve tüm alt bileşenlerle orantılı olarak, tüm dünya çapında erişime izin verilir ve tüm işlemler kaldırılır.
2. useSelector : React bileşenlerinin Redux deposunda küresel olarak depolanan belirli bölümleri seçmesine izin veren bir kanca. Seçilen verileri değiştirin ve kambiyo sırasında otomatik olarak etkinleştirin.
3. useDispatch : Redux deposuna işlem göndermek için kullanılan bir kancadır. Küresel durumu değiştiren eylemleri tetiklemek için kullanılır.

3. Basit Bir Redux Toolkit Örneği:

Adım 1: Store Oluşturma

Redux Toolkit ile bir store oluşturmak için configureStore kullanılır. Örnek:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counter-slice';

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

Kodun açıklaması:

1. configureStore işlevi @reduxjs/toolkitkütüphanesinin bir parçasıdır.
2. counterReducer dosyasını './counter-slice' içe aktarın. Bu, slice’da önceden tanımlanmış olan bir reducer’dır.
3. Redux deposunu configureStore kullanarak yapılandırın. Bu, reducer’ları tek bir yerde bir araya getirir ve gerekli ara yazılımları otomatik olarak kurar.
4. Kullanılan Redux deposunu dışa aktarın export const store. Bu, diğer uygulama bileşenlerinin mağazaya erişmesine ve kullanmasına olanak tanır.
5. Mağaza yapılandırmasında, counterReducercihazın yanındaki redüktörü belirtin reducer. Bu, redüktörün counterReducerdilimin durumunu kontrol etmesini sağlar 'counter'.

Adım 2: Slice Oluşturma

Bir slice, ilgili durum ve reducer’ları bir arada tutar. Örnek:

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;

Kodun açıklaması:

1. createSliceişlevi @reduxjs/toolkitkütüphanesinin bir parçasıdır.
2. createSlice, bir slice (dilim) tanımlamak için kullanılır. Bu, dilimin adı counter. başlangıç ​​durumu ( { value: 0 }) ve eylem tanımları (incrementve decrement)dahil edilir.

• Eylem tanımlarına göre, dilim durumunu değiştiren işlevler eşlenir. increment, mevcut değeri 1 artırırken, decrement mevcut değeri 1 azaltır.
• Eylemleri dışa aktarın export const {increment, decrement }. Bu işlemler diğer bileşenlere aktarılabilir ve işlemleri başlatmak için kullanılabilir.
• Son olarak, kullanılan dilim reducer’ını dışa aktarın export default counterSlice.reducer. Bu reducer, daha sonra diğer reducer’larla birleştirilip Redux deposunu oluşturmak için kullanılır.

Adım 3: Provider oluşturma

Arşivin ana içeriği main.jsbu kodla başlatma işlemini içerir:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

import { Provider } from 'react-redux';
import { store } from './store.js';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
)

Kodun açıklaması:

1. App bileşeni ile kaplanmış bir bileşeni oluşturun. Bu, Redux mağazasının tüm alt bileşenlere küresel olarak erişebildiği bir yapı oluşturur.
2. Provider (Sağlayıcı) bileşeni, Redux mağazasını sağlayarak tüm bileşenlere genel erişim sağlar.

Adım 4: React Komponentinde Kullanma

React komponentinde Redux Toolkit store’una erişmek ve durumu güncellemek için useSelector ve useDispatch hook'ları kullanılır.

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

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

  return (
    <div>
      <h1>Counter: {counter}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

Kodun açıklaması:

1. React kancaları olan useSelector ve useDispatchkullanılarak Redux Toolkit mağazasına erişim sağlanır.
2. useSelector ile küresel durumdan belirli bir bölüm seçilir ve bu bölümün değişikliklerini otomatik olarak izler.
3. useDispatch, Redux mağazasına işlem göndermek için kullanılır. Bu örnekte, Artır ve Azalt düğmelerine tıklandığında ilgili eylemleri tetikler.
4. Bileşen, işlemci değerini gösteren bir başlık ve bu değeri artırmak ve azaltmak için düğmeler içerir.

Redux Toolkit’in Avantajları

1. Kurulum Kolaylığı: Redux Toolkit, Redux’ın karmaşık kurulum sürecini basitleştirir. Standart yapılandırmalar ve araçlar önceden ayarlanmıştır, böylece geliştiriciler hızlı bir şekilde başlayabilirler.
2. Yapılandırma Gereksinimlerinin Azalması: Redux Toolkit, Redux’a kıyasla daha az yapılandırma gerektirir. Bu, başlangıçta daha az boilerplate kod yazılması anlamına gelir.
3. Kodun Okunabilirliği ve Sürdürülebilirliği: Redux Toolkit, state yönetimini daha okunabilir ve sürdürülebilir hale getirir. İçerisinde bulunan createSlice gibi fonksiyonlar sayesinde actionlar, reducerlar ve initial state tek bir yerde tanımlanabilir.
4. Entegre Middleware: Redux Toolkit, Redux Thunk’ı varsayılan olarak içerir, bu da asenkron işlemleri daha kolay yönetmenize olanak tanır.
5. DevTools Entegrasyonu: Redux Toolkit, Redux DevTools ile sorunsuz bir şekilde çalışır, bu da debug işlemini kolaylaştırır.
6. Immutable Update Logic: Redux Toolkit, immer kütüphanesini kullanarak state güncellemelerini kolaylaştırır. Bu sayede immutable update işlemleri daha basit ve hata yapma ihtimali daha düşüktür.
7. Performans Optimizasyonları: Redux Toolkit, performansı optimize eden bazı varsayılan ayarlarla gelir. Bu, özellikle büyük uygulamalarda fark edilir bir avantaj sağlayabilir.

Redux’un Avantajları

1. Esneklik: Redux, yapılandırmada daha fazla esneklik sunar. Karmaşık uygulamalar için bu esneklik önemli olabilir.
2. Topluluk ve Kaynaklar: Redux, daha eski ve yaygın kullanıldığı için geniş bir topluluk desteğine ve kaynak materyaline sahiptir.
3. Öğrenme Fırsatı: Redux’ı öğrenmek, state yönetimi konusunda daha derin bir anlayış kazandırabilir ve diğer kütüphaneleri veya frameworkleri öğrenmeyi kolaylaştırabilir.

Redux Toolkit’in Dezavantajları

1. Öğrenme Eğrisi: Redux Toolkit, Redux’a göre farklı bir yaklaşım benimsediği için, Redux ile önceden tanışık olan geliştiriciler için öğrenme süreci biraz farklı olabilir.
2. Özelleştirme Kısıtlamaları: Redux Toolkit, bazı varsayılan yapılandırmaları içerdiğinden, Redux’taki kadar özelleştirme seçeneği sunmayabilir.

Sonuç:

Bu yazımızda Redux Toolkit ve Redux arasındaki temel farkları, avantajları ve dezavantajları derinlemesine inceledik. Redux Toolkit’in, özellikle yeni başlayanlar ve daha az karmaşık uygulamalar için Redux’a kıyasla daha kullanıcı dostu bir alternatif olduğunu gördük. Kolay kurulumu, azaltılmış boilerplate kodu ve güçlü entegrasyon özellikleri sayesinde, Redux Toolkit modern web uygulamalarının geliştirilmesinde önemli bir yere sahiptir. Öte yandan, Redux’ın esnekliği ve geniş topluluk desteği de bazı durumlarda tercih edilebilir olabilir. Sonuç olarak, hangi aracın kullanılacağı tamamen proje ihtiyaçlarına ve geliştiricinin tercihlerine bağlıdır. Her iki yöntem de dikkatle düşünülerek seçilmelidir.

Teşekkür

Bu makalenin sonuna geldiğiniz için teşekkür ederiz. Durum yönetimi (State management) konusundaki seçenekleri anlamak ve kullanmak, geliştiriciler için önemlidir. Daha fazla bilgi edinmek ve deneyim kazanmak için bu iki yöntemi projelerinizde kullanarak pratik yapabilirsiniz. Başarılar dileriz ve herhangi bir sorunuz veya geri bildiriminiz varsa lütfen paylaşın. Teşekkür ederiz!