React – Redux Toolkit Kullanımı

4 Ekim 20244 Ekim 2024 bilisimhocamyusufbalyemez 0 yorum react dersleri, react redux toolkit, react redux toolkit kullanımı

Bir Redux Toolkit projesinde tema değişimi ve sayaç (counter) yönetimi için iki ayrı slice oluşturup, bunları store’a ekleyerek iki ayrı komponentte kullanacağız. İşlemi adım adım anlatıyorum:

Adım 1: Proje Yapısı

İlk olarak, aşağıdaki gibi bir dosya yapısı oluşturacağız:

src/
  ├── redux/
  │   ├── store.js
  │   ├── themeSlice.js
  │   └── counterSlice.js
  ├── App.js
  └── components/
      ├── Counter.js
      └── ThemeToggler.js

Adım 2: Slice’ları Oluşturma

2.1. Counter Slice (Sayaç)

İlk olarak, sayaç için bir slice oluşturacağız.

`redux/counterSlice.js`

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

const initialState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;  // Sayacı 1 artır
    },
    decrement: (state) => {
      state.value -= 1;  // Sayacı 1 azalt
    },
    reset: (state) => {
      state.value = 0;  // Sayacı sıfırla
    }
  }
});

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

export default counterSlice.reducer;

2.2. Theme Slice (Tema Değişimi)

Şimdi, tema değişikliği için bir slice oluşturacağız.

`redux/themeSlice.js`

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

const initialState = {
  theme: 'light',  // Varsayılan tema 'light'
};

export const themeSlice = createSlice({
  name: 'theme',
  initialState,
  reducers: {
    toggleTheme: (state) => {
      state.theme = state.theme === 'light' ? 'dark' : 'light';  // Temayı değiştir
    }
  }
});

export const { toggleTheme } = themeSlice.actions;

export default themeSlice.reducer;

Adım 3: Redux Store’u Oluşturma

Şimdi counterSlice ve themeSlice‘ı Redux store’a ekleyelim.

`redux/store.js`

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
import themeReducer from './themeSlice';

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

Adım 4: Componentler Oluşturma

4.1. Sayaç Bileşeni (Counter Component)

Bu bileşende, Redux’tan sayaç değerini alıp, artırma ve azaltma işlemleri yapılacak.

`components/Counter.js`

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

const Counter = () => {
  const count = useSelector((state) => state.counter.value); // Redux'tan sayaç değerini alıyoruz
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increase</button>
      <button onClick={() => dispatch(decrement())}>Decrease</button>
      <button onClick={() => dispatch(reset())}>Reset</button>
    </div>
  );
};

export default Counter;

4.2. Tema Değiştirici Bileşeni (Theme Toggler Component)

Bu bileşende temayı değiştirmek için bir düğme olacak. Mevcut tema bilgisini Redux’tan alıp ekranda göstereceğiz.

`components/ThemeToggler.js`

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { toggleTheme } from '../redux/themeSlice';

const ThemeToggler = () => {
  const theme = useSelector((state) => state.theme.theme); // Redux'tan mevcut temayı alıyoruz
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Current Theme: {theme}</h1>
      <button onClick={() => dispatch(toggleTheme())}>
        Toggle Theme
      </button>
    </div>
  );
};

export default ThemeToggler;

Adım 5: Ana Bileşen (App.js)

Şimdi, bu bileşenleri ana App.js dosyasına ekleyelim.

`App.js`

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './redux/store';
import Counter from './components/Counter';
import ThemeToggler from './components/ThemeToggler';

function App() {
  return (
    <Provider store={store}>
      <div>
        <Counter />
        <ThemeToggler />
      </div>
    </Provider>
  );
}

export default App;

Adım 6: Uygulamanın Çalıştırılması

Bu adımlarla uygulama çalıştığında:

Counter Component: Sayaç artırma, azaltma ve sıfırlama işlemlerini yapar.
ThemeToggler Component: Temayı “light” ve “dark” olarak değiştirir.

Genel İşleyiş:

Provider: Redux store’u uygulamanın her yerine sağlar.
useSelector: Redux store’dan ilgili state’i çekmek için kullanılır.
useDispatch: Redux action’larını tetiklemek için kullanılır.

Bu yapı ile global state yönetimini ve dilerseniz yeni state yapıları eklemeyi kolayca gerçekleştirebilirsiniz.

Bilişim Hocam