Ö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.
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…