Redux with React 2023 11 – Redux Toolkit İle Store Oluşturma (createSlice Metodu)

Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim.

Merhabalar.

Bu yazımda Redux Toolkit ve createSlice metodu kullanarak bir store oluşturmayı göreceğiz. Redux ile oluşturduğumuz Store’u aynen koruyacağız.

src içinde ReduxToolkitStore isminde bir klasör oluşturup içinde CounterStore.js dosyası oluşturalım.

Redux içindeki CounterStore’da oluşturduğumuz kodları burada güncelleyeceğiz.

Öncelikle tüm kodları sizinle paylaşmak istiyorum sonrasında açıklayalım.

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

const initialState = {
    counter: 0,
    toggleButton: true,
};

const counterSlice = createSlice({
    name: "counter",
    initialState,
    reducers: {
        increment: (state) => {
            state.counter += 1;
        },
        decrement: (state) => {
            state.counter -= 1;
        },
        increaseByFive: (state, action) => {
            state.counter += action.payload.value;
        },
        clear: (state) => {
            state.counter = 0;
        },
        showButton: (state) => {
            state.toggleButton = !state.toggleButton;
        },
    },
});

const store = configureStore({
    reducer: counterSlice.reducer,
  });
  
export const counterAction = counterSlice.actions;
  
export default store;
  

@reduxjs/toolkit kütüphanesinden createSlice fonksiyonunu kullanarak bir Redux “slice” oluşturuyoruz. Bu slice’dan counterSlice isimli bir obje türetiyorum.

counterSlice’a atadığım tüm işlemler, createSlice fonksiyonuna bir obje olarak gönderilecek.

Oluşturduğum counterSlice’a name ile bir isim verebilirim.

initialState parametresi ile de state’in ilk değerlerini gönderebilirim.

Slice’ın başlangıç durumu iki özelliğe sahiptir: counter 0 olarak ayarlanmış ve showButton true olarak ayarlanmış.

reducers nesnesi, state’i değiştirmek için kullanılabilecek çeşitli eylemleri tanımlar:

increment: counter‘ı 1 artırır.

decrement: counter‘ı 1 azaltır.

increaseByFive: counter‘ı belirtilen değer kadar artırır.

clear: counter‘ı 0’a ayarlar.

toggleButton: showButton‘ın boolean değerini tersine çevirir.

configureStore fonksiyonu, Redux store’unu yapılandırmak için kullanılır ve @reduxjs/toolkit kütüphanesinden gelir.

reducer özelliği, store’un durumunu nasıl değiştireceğini belirleyen bir reducer fonksiyonunu alır. Bu durumda, counterSlice.reducer ile counterSlice adlı reducer fonksiyonunu alırız.

Oluşturulan store, const store = configureStore({ reducer: counterSlice.reducer }); satırıyla tanımlanıyor. Yani, bu store’u kullanarak uygulamanın genel durumu üzerinde Redux’un gücünden faydalanabileceğiz.

Son olarak, oluşturulan store dışa aktarılıyor, bu sayede uygulamanın başka yerlerinde kullanılabilecek bir Redux store’u elde edilmiş oluyor.

Son olarak App.js içine yazdığımız Provider’ın bu store’dan çalışabilmesi için aşağıdaki gibi güncelliyoruz.

import './App.css';
import Counter from './Components/Counter/Counter';
import { Provider } from 'react-redux';
import store from './ReduxToolkitStore/CounterStore';

function App() {
  return (

    <Provider store={store}>

      <div className="App">

        <Counter />

      </div>

    </Provider>

  );
}

export default App;

Bu eylemleri dispatch ettiğinde, state’i belirttiğin şekilde değiştireceğiz.

Bir sonraki yazımda bunu görelim.