React
React JS için Redux Kurulumu ve Yönetimi
React JS kullanarak yazılan bir web servis arayüzünde karşılaşılan en önemli sorunların başında state management konusu gelmektedir. Sayfa sayısının ve state’lerin az olduğu servislerde, localStorage veya sessionStorage gibi yapılarla durum yönetimini sürdürebiliriz. Fakat state sayısı arttıkça bu yapılar ihtiyacımızı karşılamak için yetersiz kalmaktadır. Bu noktada Redux kütüphanesi, merkezi, esnek ve dayanıklı bir state yönetim mekanizması sunmaktadır. Bu yazıda, Redux kütüphanesinin ne olduğu, bir React JS projesinde nasıl kurulması gerektiği ve nasıl kullanılacağını anlatacağım.
31.01.2025
State Nedir?
Modern bir önyüz tasarımı yaparken birçok farklı komponent kullanırız. Örnek olarak aşağıdaki gibi bir form ele alalım. Buradaki kutucukların yeri, boyutu, kullanılacak yazının tipi, puntosu gibi sahip olduğu bütün özelliklere state adı verilir. Redux ise bu statelerin yönetimi için dayanıklı bir mekanizma sunar.
Redux Nedir?
Redux, JavaScript tabanlı bir kütüphanedir ve genellikle React ile birlikte kullanılır. Redux, uygulamanın tüm durumunu merkezi bir store'da saklayarak, bileşenlerin bu durumu etkili bir şekilde yönetmesini mümkün kılar.
Redux'un ana bileşenleri şunlardır:
- Store: Uygulamanın durumunun merkezi olarak saklandığı yapıdır.
- Actions: Durumda değişiklik yapılmasını isteyen birimlerdir. Genellikle type ve payload içerirler.
- Reducers: Aksiyonları işleyerek yeni bir durum (state) döndüren fonksiyonlardır.
- Dispatch: Aksiyonları tetiklemek için kullanılan fonksiyondur.
Redux Kurulum Adımları Nelerdir?
1. Proje Oluşturma:
Eğer henüz bir React projeniz yoksa aşağıdaki komut ile yeni bir React projesi oluşturabilirsiniz.
2. Redux ve Gerekli Paketlerin Kurulumu:
3. Redux Store Oluşturulması:
App dosyamızın içinde store.js adında bir dosya oluşturabiliriz. ConfigStore API’sini import ederek state’leri depolayacak bir alan oluşturuyoruz.
4. Provider Eklenmesi:
Provider API’si import edilir ve aşağıdaki gibi bir tag oluşturulur. Oluşturulan prop’a React komponentleri tarafından erişilebilmesi için store’u prop olarak geçiyoruz.
5. Slice Eklenmesi:
Src dosyası altında counterSlice.js adında bir dosya oluşturulur. Bu dosyada state’in ilk ve son durumlarını tanımlayan reducer fonksiyonları yer almaktadır. Aşağıdaki örnekte Redux’ın resmi sayfasından alınan 3 farklı fonksiyon (increment, decrement, incrementByAmount) ekliyoruz.
6. CounterSlice Reducer’a eklenir:
7. Redux State’i komponent içinde kullanımı:
Bir bileşende Redux state'ini okumak ve aksiyonlarını kullanmak için useSelector ve useDispatch hook’larını kullanabilirsiniz:
Kaynakça:
- https://medium.com/@dilarauluturhan/web-d%C3%BCnyas%C4%B1n%C4%B1n- g%C3%BC%C3%A7l%C3%BC-arac%C4%B1-redux-7fe0896cbd4b
- https://medium.com/software-development-turkey/redux-nedir-ve-neden- kullan%C4%B1l%C4%B1r-68153ad3adfb
- https://www.mediaclick.com.tr/blog/redux-nedir
- https://redux.js.org/introduction/examples
- https://legacy.reactjs.org/docs/create-a-new-react-app.html