Redux Toolkit Nedir ve Nasıl Kullanılır?

Selamlar!

React öğrenim yolculuğumda propslarının çoğalması ve projenin içinden çıkamayışımdan “bunun için daha pratik bir şeyler olmalı” demiştim. Evet varmış, aklın yolu bir işte 🙂

Öncelikle kullanım ve aranma yoğunluklarına bir göz atalım. Redux ve Redux Toollkit paketlerinin aranma ve kullanım hacimlerini aşağıdaki grafiklerden de görebilirsiniz.

Redux Nedir ve Çalışma Mantığı

Bilindiği gibi propslar aracılığı ile fonksiyon ve state gibi tanımlamaları tanımladığımız yerin dışında farklı alanlarda da kullanabilmek için diğer componentlere bunları tek tek props geçmeli, diğer taraftan alarak kullanabiliyoruz. Ancak buradaki sorun hiç kullanmayacağımız bir componentten de bu propsları geçebiliyoruz olmamız gerçekten büyük sorun olabiliyor. İşte Redux burada devreye giriyor ve ortak bir store oluşturarak burada tüm state ve fonksiyonları tanımlıyoruz. Sadece kullanacağımız yerde çağırarak props geçme sorununu çözüyoruz.

Redux dökümanlarında “Redux, Javascript uygulamaları için öngörülebilir bir durum taşıyıcısıdır” tanımlaması yapılarak durumu tam olarak bizlere özetliyor. Redux, uygulamadaki global durumu organize etmek için kullanılan bir model ve kütüphane sağlıyor.

Ayrıca Jason Lengstorf ve Mark Erikson “Let’s learn modern Redux!” videosuna bakabilirsiniz.

Ancak Redux kullanımı her ne kadar sorunları biraz çözse de Redux kullanımı yine de zorlayıcı olabiliyor. Redux’daki kullanım sorunları çözmeyi hedefleyerek bu sefer Redux Toolkit çıkarılmıştır. Redux Toolkit kullanımı hem daha kolay hem daha anlaşılır.

Redux ve Redux Toolkit hakkında daha fazla bilgiyi kendi internet sitelerinden ulaşabilirsiniz.
https://redux.js.org/
https://redux-toolkit.js.org/

Redux varken Neden Redux Toolkit Kullanalım?

Redux Toolkit sitesinde de hangi sorunları çözdüğünü şu şekilde açıklıyorlar.

1. Redux deposunu yapılandırmak çok karmaşıktır.
2. Redux’un yararlı bir şey yapması için çok sayıda paket eklemem gerekiyor.
3. Redux çok fazla kalıp kod gerektiriyor.

Redux Toolkit Kurulum

React projemizi başlatıyoruz. Eğer React projesi nasıl başlatılır bilmiyor veya hatırlamıyorsanız React Projesi Başlatma yazıma göz atabilirsiniz.

Sonrasında Redux Toolkit sayfasındaki kurulum aşamalarını takip edebiliriz.

Kurulumları buradan kendi dökümantasyonundan da takip edebilirsiniz. Kurulu bir React projesi ile birlikte de kurabilir dilerseniz daha önce kurulmuş bir React projesine Redux peketini kurabilirsiniz.

1.ADIM : Ben npm kullanıyorum ve Vite ile bir React projesi başlattığım için aşağıdaki kurulum ile Redux paketini kuruyorum.

npm install react-redux

npm install @reduxjs/toolkit

2.ADIM: Paket kurulumundan sonra src klasörü içerisinde bir app klasörü içerisine store.jsx oluşturuyoruz ve aşağıdaki gibi tanımlamaları yapıyoruz.

// src/app/store.js

import { configureStore } from '@reduxjs/toolkit'
export const store = configureStore({  
   reducer: {},
})

3.ADIM: Daha sonra React’a Redux Store tanımlamak için <Provider /> component’ini main.jsx dosyamıza dahil edip, <App /> component’ini sarmalıyoruz ve props olarak store’u geçiyoruz. Böylece bir parent component vasıtası ile tüm componentler store props’unu kullanabilecek.

import { createRoot } from "react-dom/client";

import { Provider } from "react-redux";
import { store } from "./app/store.jsx";

import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <Provider store={store}>
    <App />
    <Counter />
  </Provider>
);

4.ADIM: Daha sonra src/features/counter/counterSlice.js dizinine yeni bir dosya oluşturup içerisine aşağıdaki tanımlamaları yapıyoruz. Burada tanımlamalarımızı yapıyoruz ve Redux Toolkit’ten createSlice API içerisine aktarım sağlıyoruz. Oluşturduğumuz slice vasıtası ile gerekli işlevlerin hepsini dışarı aktarıyoruz.

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

const initialState = {
  value: 0,
};

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

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

export default counterSlice.reducer;

5.ADIM: Yukarıda oluşturduğumu Slice Reducers’ı Store’a ekliyoruz.

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

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

6.ADIM: Artık React-Redux hooklarının, React componentleri ile etkileşime girmesine izin vermiş oluyoruz. Burada tek yapmamız gereken şey ilgili component’i oluşturup, tanımladığımız fonksiyonları burada kullanmak. features/counter/Counter.js dosyasını oluşturup aşağıdaki tanımlamaları yapalım.

// src/features/counter/Counter.jsx

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { decrement, increment } from "./counterSlice";

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

  return (
    <>
      <div>
        <button onClick={() => dispacth(increment())}>Increment</button>
        <span
          style={{ margin: "0 10px", display: "inline-block", width: "50px" }}
        >
          {count}
        </span>
        <button onClick={() => dispacth(decrement())}>Decrement</button>
      </div>
    </>
  );
}

Son olarak main.jsx dosyamızda tanımladığımız component’i dahil edip çağıralım. Ta ta ta taaa projemiz çalışıyor! Projenin kodlarını github hesabımda paylaşıyorum. Buradan ulaşabilirsiniz.

Redux Toolkit için oluşturup, github hesabıma attığım daha güncel bir örnek/dosya yapısı için React Redux Toolkit Counter Template isimli github projeme bakabilirsiniz. Aşağıda bir ekran görüntüsünü görüyor olacaksınız 🙂

Anladığım kadarıyla anlatmaya çalıştım. Umarım faydalı olmuştur. Başka bir blog yazısında görüşmek üzere 🙂

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.

Kaynaklar

• https://redux-toolkit.js.org/tutorials/quick-start
• https://medium.com/@furkansunger/redux-toolkite-giris-953a57860d8c