Redux Toolkit

Herkese selam! Bugün sizlere bu yazımızda Redux Toolkit'in ne olduğunu ve ne için kullanıldığını anlatmaya çalışacağız. Günümüzün karmaşık ve büyüyen yazılım projelerinde, etkili bir durum yönetimi aracı olan Redux Toolkit, geliştiricilere Redux'in sunduğu güçlü durum yönetimi özelliklerini daha hızlı ve verimli bir şekilde kullanma imkanı sunar. Redux Toolkit, Redux kütüphanesini daha hızlı ve verimli bir şekilde kullanmak için tasarlanmış bir araçtır. Redux Toolkit'i anlamadan önce gelin Redux nedir ve ne işe yarar, onu anlamaya çalışalım.

Redux Nedir ve Ne İşe Yarar?

Redux, JavaScript uygulamalarında durum yönetimi için kullanılan bir kütüphanedir. Redux, uygulamanın durumunu tek bir yerde tutar ve bu durumu değiştirmek için belirli eylemler kullanır.

Redux, uygulamanın durumunu yönetmek için üç temel kavramı kullanır:

Store: Uygulamanın durumunu tutan nesnedir. Uygulamanın durumu, bir dizi özelliği içeren bir nesne olarak temsil edilir. Bu özellikler, uygulamanın durumunu tanımlayan verileri içerir.
Actions: Uygulamanın durumunu değiştirmek için kullanılan nesnelerdir. Bir eylem, uygulamanın durumunu değiştiren bir nesnedir. Eylemler, uygulamanın durumunu değiştirmek için kullanılan tek yol olarak kabul edilir.
Reducers: Eylemleri işleyen ve uygulamanın durumunu güncelleyen fonksiyonlardır. Bir azaltıcı, bir eylemi işleyen ve uygulamanın durumunu güncelleyen bir fonksiyondur. Azaltıcılar, uygulamanın durumunu güncellemek için kullanılan tek yol olarak kabul edilir.

Redux, uygulamanın durumunu yönetmek için bu üç kavramı kullanır. Bu kavramlar, uygulamanın durumunu daha öngörülebilir ve daha kolay anlaşılabilir hale getirir.

Redux'un bu temel kavramlarını anladıktan sonra, yazımızın ana konusu olan Redux Toolkit nedir ve ne işe yarar, onu inceleyelim.

Redux Toolkit Nedir ve Ne İşe Yarar?

Redux Toolkit, Redux kütüphanesini daha hızlı ve verimli bir şekilde kullanmak için tasarlanmış bir araçtır. Redux Toolkit, Redux'in sunduğu güçlü durum yönetimi özelliklerini daha hızlı ve verimli bir şekilde kullanma imkanı sunar.

Redux Toolkit'in en önemli özelliklerinden biri, configureStore fonksiyonudur. Bu fonksiyon, Redux store'unu oluşturmayı kolaylaştırır.

Redux Toolkit'in createSlice da önemli olan bir diğer fonksiyondur. Bu fonksiyon, Redux için dilimler (slices) oluşturmanıza izin verir. Her bir dilim, bir parça state ve bu state üzerinde işlem yapan bir dizi reducer fonksiyonunu içerir.

Redux Toolkit'in createAsyncThunk ve createReducer adında iki ayrı fonksiyonu da vardır. createAsyncThunk, asenkron işlemleri yönetmek için kullanılırken, createReducer, bir dilimin state'ini güncellemek için kullanılır.

Redux Toolkit Avantajları

Kolay Kullanım: Redux Toolkit, API'yi basitleştirir ve kullanımını kolaylaştırır, bu sayede daha az kod yazmanıza olanak tanır.
Hazır Ayarlanmış Fonksiyonlar: Redux Toolkit, bize önceden hazırlanmış fonksiyonlar sunar. Bu fonksiyonlar, durum kesitlerini oluşturmak ve yönetmek için kullanılır.
Performans: Redux Toolkit, projenin performansını artırır ve daha hızlı çalışmasını sağlar. Özellikle, gelişmiş performans özelliklerine sahip olması, Redux Toolkit'in daha hızlı ve daha verimli çalışmasını sağlar.
Asenkron İşlemler: Redux Toolkit, asenkron işlemleri yönetmek için kullanılan createAsyncThunk fonksiyonunu içerir. Bu fonksiyon, asenkron işlemleri kolayca yönetmenize olanak tanır.

Redux Toolkit ve Redux Arasındaki Farklar

Redux Toolkit ve Redux arasındaki temel farklar şunlardır:

Api Karmaşıklığı : Redux Toolkit, Redux'in sağladığı API'yi basitleştirir ve kullanımını kolaylaştırır.
Kod Tekrarı : Redux Toolkit, Redux'in sunduğu bazı özellikleri otomatikleştirir ve tekrar eden kodu azaltır. Özellikle, azaltıcıları otomatik olarak oluşturmak ve durum kesitlerini oluşturmak için slice API'sini kullanmak, kod tekrarını azaltır.
Hata Ayıklama : Redux Toolkit, Redux'in hata ayıklama sürecini kolaylaştırır ve hataları daha hızlı ayıklamanıza olanak tanır. Özellikle, gelişmiş hata ayıklama özelliklerine sahip olması, Redux Toolkit'in hataları daha kolay ayıklamanıza olanak tanır.

Redux Toolkit Kullanımı Ve Çalışma Mantığı

Redux Toolkit kullanarak bir uygulama geliştirmek oldukça kolaydır.Redux Toolkit kullanarak bir uygulama geliştirmek için aşağıdaki adımları izleyebilirsiniz:

Redux Toolkit Yükleme: İlk olarak, Redux Toolkit'i yüklemeniz gerekir. Redux Toolkit'i yarn veya npm aracılığıyla yükleyebilirsiniz.

yarn add @reduxjs/toolkit

veya

npm install @reduxjs/toolkit

Store Oluşturma: Store yapısı oluşturmada store ne işe yarar ve nasıl oluşturulur hakkında bilgi sahibi olmalısınız. Store, uygulamanın durumunu tutan nesnedir. Store genellikle bir dosyada oluşturulur ve uygulamanın durumunu yönetmek için kullanılır.

app/store.js

import { configureStore } from '@reduxjs/toolkit'; // Redux Toolkit'ten configureStore fonksiyonunu import ederiz
import rootReducer from './reducers'; // Reducer'ları import ederiz

const store = configureStore({ // Store'u oluştururuz
   counter: counterReducer, // Reducer'ları store'a ekleriz
});

export default store;

Ardından bu store'u uygulamamızda kullanmak için Provider componentini kullanarak store'u uygulamamıza bağlarız.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'; // Redux Toolkit'ten Provider componentini import ederiz
import store from './store'; // Store'u import ederiz
import App from './App';

ReactDOM.render(
  <Provider store={store}> // Store'u uygulamaya bağlarız
    <App />
  </Provider>,
  document.getElementById('root')
);

Reducer Oluşturma:Reducer, bir eylemi işleyen ve uygulamanın durumunu güncelleyen bir fonksiyondur. Reducer'lar genellikle bir dosyada oluşturulur ve uygulamanın durumunu güncellemek için kullanılır.

counterSlice.js

import { createSlice } from '@reduxjs/toolkit'

const initialState = { //Burda başlangıç durumunu belirleriz
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => { // Reducer fonksiyonunu oluştururuz
      state.value += 1 // State'i bir artırırız
    },
    decrement: (state) => { // Reducer fonksiyonunu oluştururuz
      state.value -= 1 // State'i bir azaltırız
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions // Action'ları export ederiz ki component'ten kullanabilelim

export default counterSlice.reducer

Component Oluşturma: Component, uygulamanın arayüzünü oluşturan ve kullanıcı etkileşimlerini yöneten bir yapıdır. Component'ler genellikle bir dosyada oluşturulur ve uygulamanın arayüzünü oluşturmak için kullanılır.

Counter.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux' // Redux Toolkit'ten useSelector ve useDispatch hook'larını import ederiz
import { decrement, increment } from './counterSlice' // Action'ları import ederiz

export function Counter() {
  const count = useSelector((state) => state.counter.value) // State'den value'yi seçeriz
  const dispatch = useDispatch() // Dispatch fonksiyonunu alırız

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())} //tıklandığında increment action'ını dispatch eder
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())} //tıklandığında decrement action'ını dispatch eder
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

ÖZET

configStore ile bir Redux store oluşturun
Redux store'u uygulamanıza bağlamak için Provider'ı kullanın
createSlice ile bir Reducer oluşturun
useSelector ve useDispatch hook'larını kullanarak state ve dispatch fonksiyonunu alın

Bu adımları takip ederek Redux Toolkit kullanarak bir uygulama geliştirebilirsiniz. Redux Toolkit, Redux'in sunduğu güçlü durum yönetimi özelliklerini daha hızlı ve verimli bir şekilde kullanmanıza olanak tanır.

Redux Toolkit Ve Bir Backend API İle Nasıl Kullanılır?

Aslında bir fark yoktur. Sadece Redcuer'lara ekstra bir işlem yapmanız gerekmektedir. Örneğin bir API'den veri çekmek istediğinizde, bu veriyi bir Reducer'a ekleyip, bu Reducer'ı store'a eklemeniz gerekmektedir. Burda ek pending, fulfilled ve rejected durumlarını eklemeniz gerekmektedir.

pending durumu, veri çekme işlemi başladığında, fulfilled durumu, veri çekme işlemi başarılı olduğunda, rejected durumu ise veri çekme işlemi başarısız olduğunda çalışır. createAsyncThunk fonksiyonu, bir API'den veri çekmek için kullanacağız.

Store Oluşturma

app/store.js

    import { configureStore } from "@reduxjs/toolkit";
    import userSlice from "./user/userSlice";

    export const store = configureStore({
      reducer: {
        user : userSlice
      },
    });

Reducer Oluşturma

userSlice.js

    import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

    const initialState = {
    users: [], // Kullanıcıları tutar
    loading: false, // Veri çekme işlemi devam ederken loading durumunu tutar
    error: null, // Veri çekme işlemi olduğunda hata durumunu tutar
    };

    export const fetchUsers = createAsyncThunk(
    "user/fetchUsers",
    async () => {
        try {
        const response = await fetch("api-url");
        if (!response.ok) {
            throw new Error("Veri çekme işlemi başarısız oldu");
        }
        const data = await response.json();
        return data;
        } catch (error) {
        throw error;
        }
    }
    );

    const userSlice = createSlice({
    name: "user",
    initialState: initialState,
    extraReducers: (builder) => {
        builder
        .addCase(fetchUsers.pending, (state, action) => { // Veri çekme işlemi başladığında
            state.loading = true; // Veri çekme işlemi başladığında loading durumunu true yapar
            state.error = null; // Hata durumunu sıfırlar
        })
        .addCase(fetchUsers.fulfilled, (state, action) => { // Veri çekme işlemi başarılı olduğunda
            state.loading = false; // Veri çekme işlemi başarılı olduğunda loading durumunu false yapar
            state.users = action.payload; // Veriyi state'e ekler
        })
        .addCase(fetchUsers.rejected, (state, action) => { // Veri çekme işlemi başarısız olduğunda
            state.loading = false; // Veri çekme işlemi başarısız olduğunda loading durumunu false yapar
            state.error = action.error.message; // Hata mesajını state'e ekler
        });
    }
    });

    export default userSlice.reducer;

Component Oluşturma

UserList.js

import React, { useEffect } from "react"; // React'ten useEffect hook'unu import ederiz
import { useDispatch, useSelector } from "react-redux"; // Redux Toolkit'ten useSelector ve useDispatch hook'larını import ederiz
import { fetchUsers } from "./user/userSlice"; // Action'ları import ederiz

const UserList = () => {
  const dispatch = useDispatch(); // Dispatch fonksiyonunu alırız
  const { users, loading, error } = useSelector((state) => state.user); // State'den users, loading ve error'ı seçeriz

  useEffect(() => {
    dispatch(fetchUsers()); // fetchUsers action'ını dispatch eder ve veri çekme işlemi başlar
  }, [dispatch]);

  if (loading) { // Veri çekme işlemi devam ediyorsa (loading durumu true ise)
    return <div>Loading...</div>;  // Loading... yazısını gösterir
  }

  if (error) { // Veri çekme işlemi başarısız olursa (error durumu true ise)
    return <div>Error: {error}</div>; // Hata mesajını gösterir
  }

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => ( 
          <li key={user.id}>{user.name}</li> // api'den gelen veriyi listeler
        ))}
      </ul>
    </div>
  );
};

export default UserList;

Umarım yazımız faydalı olmuştur. Vaktinizi ayırdığınız için teşekkürler :) İyi çalışmalar.

Daha Fazla Bilgi İçin

PreviousReactJS Nedir?NextSOLID Yazılım Geliştirme Prensipleri

Last updated 4 months ago