Ö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 bir projeye redux nasıl kurulur ve Redux Store nasıl oluşturulur bundan bahsedeceğim.
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.
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;
Bir redux store oluşturabilmek için öncelikle createStore redux modülünü dahil ediyoruz uygulamamıza.
import { createStore } from "rexux";
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);
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.
Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…
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.…
Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…
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…
Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…
9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…