FrontEnd Developer Road Map

Redux with React 2023 4 – Projeye Redux’ın Kurulması ve Store Oluşturma

Merhabalar.

Bu yazımda bir projeye redux nasıl kurulur ve Redux Store nasıl oluşturulur bundan bahsedeceğim.

Redux Kurulumu

Terminale aşağıdaki komutu yazıp yürüterek redux’ı projemize dahile edebiliriz.

npm i redux

Projemde src içine ReduxStore isminde bir klasör onun içine de CounterStore.js isimli dosyamı oluşturuyorum. Redux dosyaları birer javascript dosyası olduğu için uzantısı .js olur.

Store.js

import { createStore } from "rexux";

const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === "INCREMENT") {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === "DECREMENT") {
    return {
      counter: state.counter - 1,
    };
  }

  return state;
};

const store = createStore(counterReducer);

export default store;

Import createStore

Bir redux store oluşturabilmek için öncelikle createStore redux modülünü dahil ediyoruz uygulamamıza.

import { createStore } from "rexux";

Store Oluşturma

createStore fonksiyonunu kullanarak bir store tanımlaması yapacağız. Bu fonksiyon bir reducer fonksiyonunu kendisine parametre olarak alır. Yani store üzerinde hangi fonksiyon işlem yapacak bunu belirlemiş oluyoruz.

const store = createStore(counterReducer);

counterReducer Fonksiyonu Oluştur

createStore’a paremetre olarak verdiğimiz counterReducer fonksiyonumuzu oluşturacağız.

const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === "INCREMENT") {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === "DECREMENT") {
    return {
      counter: state.counter - 1,
    };
  }

  return state;
};

reducer fonksiyonlarımız state ve action isminde iki parametre alır.

State, değişimi takip edilecek değişkenlerin bir objesi ya da değişkenidir. Bu uygulamamızda counter ismindeki değişkenimizi takip edeceğiz ilk değerinin de 0 olmasını istiyorum.

o yüzden state olarak { counter: 0 } değerini verdim.

action bir diğer parametremizdir. Bu da bir type ve state’in değişiminin nasıl sağlanacağının parametrelerini içerir. 2. si zorunlu değildir.

action.type ile hangi işlemin yapacağının bilgisi gönderilir. Burada bir if ve ya switch case yapısı kurulabilir. Tamamen geliştiricinin tercihine kalmıştır.

Biz action.type olarak INCREMENT gönderirsek counter değerinin 1 artırılacak, DECREMENT gönderilirse counter değeri 1 azaltılacak.

state.counter ifadesi o anki counter değerini yakalamamızı sağlar.

Son olarak bu state’i geriye dönüyoruz.

Bunu şimdi istediğimiz yerde çağırıp güncel state’i alıp değişkenlere atayıp ilgili yerlerde kullanacağız.

Ancak bunu bir sonraki yazımızda ele alacağız.

Görüşmek üzere.

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

2 gün ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…

2 gün ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

2 gün ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…

3 gün ago

Kedimiz Oly & FIP Süreci 5 – Teşhisten Önce Biz… Veterinerimize Güvenebilir Miydik?

Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…

3 gün ago

Kedimiz Oly & FIP Süreci 4 – Antalya’ya Yolculuk – Bir Şeyler Ters Gidiyor… & İstanbul’a Geri Dönüş

9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…

4 gün ago