React ve Redux Mantığı kitabı ile web uygulamalarının geliştirilmesinde ihtiyaç duyulan temel konuları öğrenebilirsiniz React ve Redux 'a dair tüm detayları keşfedin
React ve Redux, modern web uygulamalarının geliştirilmesinde oldukça kullanışlı araçlar arasında yer alırlar. React, güçlü bir kullanıcı arayüzü oluşturma kütüphanesidir ve Redux ise, özellikle büyük ve karmaşık uygulamalarda kullanılabilecek bir durum yönetimi kütüphanesidir.
React, bir arayüz oluşturma kütüphanesi olarak, bileşenler üzerine inşa edilmiştir. Bu bileşenler, soyutlanmış ve yeniden kullanılabilir yapıda oluşturulur. Kompleks ve büyük ölçekli bir uygulamada, farklı bileşenler arasındaki durum yönetimi oldukça zor bir hale dönüşebilir. İşte burada Redux devreye girer ve durum yönetimi işlemini kolaylaştırır.
Redux, birçok küçük bileşenlerden oluşan bir uygulama için merkezi bir durum yönetimi sağlar. Bu, uygulamanın daha düzenli ve hatasız çalışmasını sağlar. Redux, durum yönetimi yapısı için kesin bir akışa sahiptir. Bu sayede, uygulamanın durumun herhangi bir noktasında nasıl göründüğü ve davrandığı konusunda kesin bir bilgi edinilebilir. Bu, hata ayıklama sürecini oldukça kolaylaştırır.
React ve Redux, birlikte kullanıldığında oldukça güçlü bir çözüm sunarlar. React bileşenleri arayüz için sorumluken, Redux durum yönetimi için sorumludur. Bu sayede, uygulama daha öngörülebilir hale gelir. Başka bir deyişle, Redux, React uygulamalarında temel bir gerekliliktir.
State Nedir?
React, kullanıcı arayüzleri için bir JavaScript kütüphanesidir ve bileşenleri kullanarak kullanıcı arayüzünü oluşturur. React'ta "state" kavramı oldukça önemlidir. State, React bileşenlerindeki verileri tutar.
State kavramı, bileşenler arasında veri taşınmasını kolaylaştırır, verilerin değiştirilmesini takip eder ve bileşenlerin yeniden render edilmesini sağlar. State, mutable yapıdadır yani değiştirilebilir.
React bileşenlerinde, state özellikle interaktif ve dinamik bileşenlerde kullanılır. Kullanıcı etkileşimi sonucu değişen veriler state aracılığıyla yönetilir. Örneğin, bir form üzerinde kullanıcının girdiği veriler state aracılığıyla saklanabilir.
State, Props özelliği ile karıştırılmamalıdır. Props da bir veri taşıma mekanizmasıdır ancak state, bileşenin kendisi tarafından yönetilen ve değiştirilebilen verileri tutar. Props ise, bir üst seviye bileşenden gelen ve değiştirilemeyen verileri taşır.
React bileşenleri, bir "constructor" fonksiyonu içindeki "state" objesi ile tanımlanır. State, bileşen içinde erişilebilir ve özelliklerine "this.state" ifadesi ile erişilir.
Redux Nedir?
Redux, React uygulamalarında kullanılan bir state management kütüphanesidir. State yönetimi konusunda React'in sunduğu çözümleri geliştirir ve iyileştirir.
Redux'un temelinde, tek bir state ağacı yer alır ve bu sayede tüm uygulama boyunca state'in nasıl değiştirdiği takip edilebilir. Bu özellik, uygulama büyüdükçe ve state sayısı arttıkça oldukça faydalıdır. Aynı zamanda, Redux ile state yönetimi yazılımcıların kontrolü altındadır ve state'i manipulate etmek kolaylaşır.
Bir Redux uygulaması, üç temel yapıya sahiptir: actions, reducers ve store. Actions, uygulama içerisindeki değişiklikleri açıklar ve reducers, ise bu değişikliklere göre state'in güncellenmesini sağlar. Store, tüm stateleri tutan ve güncelleyen yerdir.
Redux, React uygulamalarında kullanılmak üzere tasarlandığından, React ile Redux birlikte kullanılmak oldukça kolaydır. Eğer Redux'u kullanmak istiyorsanız, öncelikle bir store oluşturmanız ve bu store'u uygulamanıza bağlamanız gerekir. Bu işlem, Provider yapısı kullanılarak gerçekleştirilir. Provider, uygulamanızın belirli bir bölümünü sarmalayan ve store'a erişmeyi sağlayan bir yapıdır.
Ayrıca, Redux ile react arasındaki bağlantıyı kurmak istiyorsanız, Connect fonksiyonunu kullanabilirsiniz. Connect fonksiyonu, state ve actions'a erişmek için kullanılır ve bu sayede componentler arasındaki iletişim kolaylaşır. Böylece, Redux kullanarak state controlü oluşturabilir ve uygulamanızın performansını artırabilirsiniz.
React-Redux Nasıl Kullanılır?
React ve Redux birlikte kullanılarak uygulamaların daha iyi yönetilebilmesi ve kontrol edilebilmesi mümkündür. React-Redux kombinasyonu, React'in component yapısını ve state kontrol mekanizmalarını Redux'un store, action, ve reducer yapısı ile birleştirerek güçlü bir yapı oluşturur. Böylece uygulamalar daha kolay bir şekilde geliştirilir ve düzenlenir.
React-Redux kullanmak için öncelikle React uygulamasını Redux ile entegre etmek gerekir. Provider yapısı, bunun için kullanılır. Provider, Redux store yapısını React uygulamasının tamamında kullanılabilir hale getirir. Provider, uygulamanın en üst component'inde kullanılmalıdır. Bununla birlikte, Connect fonksiyonu da kullanılabilir. Connect, component'leri Redux ile bağlar ve store'daki state'i component'lere aktarır.
Bir örnek üzerinden açıklamak gerekirse, bir React uygulamasında bir butonun tıklanması sonucu state'in değişmesini istediğimizi düşünelim. Bu amaçla, butona bir onClick event listener ekleyerek, state'in değişeceği bir fonksiyon yaratabiliriz. Bu fonksiyon, öncelikle bir action yaratır ve bu action, Redux'taki store'a gönderilir. Store, reducer'lar aracılığıyla state'i değiştirir ve güncel bir state oluşur.
React-Redux'in kullanılması, son derece esnek bir yapıya sahiptir ve uygulamanın ihtiyacına göre farklı şekillerde kullanılabilir. Özellikle büyük ölçekli uygulamalarda state kontrolü oldukça önemlidir ve React-Redux, bu kontrolü sağlamak için ideal bir yapı sunar.
Provider Kullanımı
React uygulamalarında, state'i paylaşmak veya daha iyi organize etmek için Provider yapısı kullanılabilir. Provider, Redux store'unu bir React uygulamasına bağlamak ve tüm kapsamda store'a erişim sağlamak için kullanılır. Provider, React uygulamasının en üst seviyesinde kullanılabilir ve store'unuzu tüm alt bileşenlerinizde erişilebilir hale getirir.
Provider, Props olarak bir store alır ve tüm alt bileşenlerine store'u sağlar. Bu sayede, tüm bileşenleriniz, Redux store'unu tek bir noktadan erişebilir ve güncellemeleri alabilir. Provider, react-redux kütüphanesi ile birlikte kullanılmaktadır. Kullanımı oldukça basit ve tek gereken provider bileşenini, en üst seviye bileşen olarak yerleştirmektir.
Provider bileşenine, store'unuzu props olarak iletebilirsiniz. Buna ek olarak, provider bileşeninin altında yer alan tüm bileşenler bir store'a sahip olacak ve erişim sağlayacaktır. Provider bileşeni, aşağıdaki gibi bir yapıda kullanılabilir:
| Kod: | Açıklama: |
|---|---|
import { Provider } from 'react-redux';import store from './store';ReactDOM.render( | Bu kod bloğunda, App bileşeni Provider bileşeninin altında yer alıyor. Provider bileşenine store'u gönderiliyor ve alt bileşenlerin erişimine açık hale geliyor. Böylece store, tüm bileşenlerde kullanılabilir hale gelmiş oluyor. |
Provider yapısı, state'i paylaşmak ve organize etmek için önemlidir ve React uygulamalarında sıkça kullanılmaktadır. Provider yapısının kullanımı ile tüm bileşenlerinizde store erişimini tek bir yerden sağlayabilir, güncellemeleri kolayca takip edebilir ve organize edebilirsiniz.
Connect Fonksiyonu
Connect fonksiyonu, Redux ve React arasındaki bağı kurmak için kullanılır. Bu fonksiyon, React componentlerini Redux store'una bağlar ve componentlerin store'a erişmesini sağlar.
Connect fonksiyonu, birinci parametre olarak mapStateToProps ve ikinci parametre olarak mapDispatchToProps fonksiyonlarını alır. mapStateToProps, state objesinden component'e gerekli olan verileri getirir. mapDispatchToProps ise, component'in dispatch fonksiyonunu kullanarak store'a action göndermesini sağlar.
Bu fonksiyon, kullanımı kolay olduğu için React ve Redux arasındaki bağı kurmak için sıklıkla tercih edilir. Connect fonksiyonu kullanarak, componentlerin state objesine erişmesi daha verimli olur. Ayrıca, componentlerin veri değişimlerini Redux store'una hızlıca iletmeleri mümkün olur.
- Connect fonksiyonunun faydaları:
- Componentlerin state objesi ve dispatch fonksiyonuna kolayca erişim sağlaması
- Componentlerin state değişikliklerini hızlıca Redux store'una iletebilmesi
- Componentlerin güncel state bilgisine erişmesini sağlaması
- Componentlerin state değişikliklerine karşı otomatik bir şekilde yeniden render olması
Örnek olarak, aşağıdaki kodda, mapStateToProps fonksiyonu, count isimli state objesini component'e getirir. mapDispatchToProps fonksiyonu ise, increment ve decrement fonksiyonlarını component'e bağlar ve butonların tıklanması durumunda count değişkenini günceller.
| actions.js | Counter.js |
|---|---|
export const increment = () => { return { type: 'INCREMENT' } } export const decrement = () => { return { type: 'DECREMENT' } } | import React from 'react' import { connect } from 'react-redux' import { increment, decrement } from './actions' const Counter = ({ count, increment, decrement }) => { return ( <div> <h2>Count: {count}</h2> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> </div> ) } const mapStateToProps = (state) => { return { count: state.count } } export default connect(mapStateToProps, {increment, decrement})(Counter) |
State Control'ü Nasıl Oluşturulur?
React ve Redux kullanarak state controlü oluşturmak oldukça basittir. İlk önce bir action yapısı tanımlamalıyız. Action'lar, state'in değiştirilmesi için kullanılır. Bir action bir obje olarak tanımlanır ve iki anahtar içerir; birincisi, action'ın ne tür bir işlevi yerine getirdiğini ifade eden bir tür anahtarıdır. İkincisi, action'ın yürütülmesi sırasında kullanılabilecek gönderilecek verileri içeren bir data anahtarından ibarettir.
Ardından bir reducer yapısını oluşturmalıyız. Reducer, action'ların kullanıldığı ve state'in nasıl değiştirileceğini kontrol ettiği bir işlevdir. Bunu oluşturmak için, bir ana işlev yazılmalıdır. Bu işlev, state'i değiştirmek ve güncellemek için action'lar kullanacaktır.
Son olarak, store yapısını oluşturmalıyız. Store, Redux'un kalbidir ve genellikle uygulamanın en üst düzeyinde tanımlanır. Store, state'i tutar ve reducer'ları Redux'a kaydeder. Provider kullanılarak store ağacı, child bileşenlerine gönderilebilir.
Aşağıda bir örnek verilmiştir:
```import { createStore } from 'redux';
// bir action tanımlayalımconst ADD_ITEM = 'ADD_ITEM';
// bir reducer yapısı oluşturalımconst myReducer = (state = [], action) => { switch(action.type) { case ADD_ITEM: return [...state, action.payload]; default: return state; }};
// store yapısını oluşturalımconst myStore = createStore(myReducer);
```
Bu örnekte, ADD_ITEM adında bir action objesi tanımladık. Bu, reducer yapısında kullanılabilir. Daha sonra, myReducer adında bir reducer yapısı oluşturduk ve bir switch bloğu kullanarak state'i kontrol ettik. ADD_ITEM action'u gönderilirse, reducer yapısı state'e yeni bir öğe ekleyecektir. Son olarak, createStore kullanarak myStore adında bir store oluşturduk.
Bu adımlarla React ve Redux kullanarak state controlü oluşturabileceğiniz örneklerle açıklamış olduk. Bu yöntemi uygulayarak, uygulamanızın state'ini daha etkili bir şekilde kontrol edebilirsiniz.
Action Yapısı ve Kullanımı
React ve Redux, modern frontend uygulamalarının geliştirilmesinde sıklıkla kullanılan bir yapıdır. Bu yapı içerisinde Action'lar, Redux ile çalışan tek yönlü bir veri akışını sağlamak için kullanılır.
Action'lar, uygulamamızdaki herhangi bir kullanıcı etkinliği gibi belirli bir olayı temsil eden nesnelerdir. Bu yeniden yükleme veya bir veritabanı işlemi gerçekleştirme olabilir. Action nesnesi, iki bileşen taşır: type (eylemin türü) ve payload (ek bilgi).
type, bir action'ın türünü tanımlar ve uygulamamızın action'ın ne yaptığını anlamasına yardımcı olur. payload ise eylemin ne yaptığı hakkında ayrıntılı bilgi sağlar.
Örneğin, bir kullanıcının hesabına para yatırmak istediğimizde, bir action kullanabiliriz. Bu işlem için iki parça tutmanız gerekecektir. İlk olarak, uygulamanın ne yaptığını anlaması için bir tür belirleyin (Örn: ADD_MONEY). İkinci olarak, eylemin ne yaptığıyla ilgili bilgileri içeren bir yük ekleyin (Örn: User ID'si, para miktarı, tahsilat yöntemi vb.). Bu iki bileşen combineReducers () ile birleştirilir ve bir store oluşturulur.
Bu şekilde, componentler bu işlem hakkında belirli bir bilgi içermek zorunda kalmaz ve bu da uygulamaya büyük bir esneklik sağlar.
Reducer Yapısı ve Kullanımı
Reducer, Redux ile birlikte kullanılan bir kavramdır. Reducer'lar, uygulamanın state'lerinin nasıl değiştirileceğini belirler ve aynı zamanda yeni state'leri de oluşturur. Reducer'lar, bir veya birkaç state değişkenine bağlı olarak çalışır ve önceden belirlenmiş bir action türüne göre işlev gösterirler.
Reducer'lar genellikle bir switch-case yapısı içinde kullanılırlar. Aksiyon türüne göre farklı durumlar işlenir ve sonuç olarak yeni bir state oluşturulur. Örneğin, bir kullanıcının adını ve soyadını değiştirirken kullanılabilir. Bu durumda aksiyon tipi "DEĞİŞTİR" şeklinde olabilir. Json formatında {"type": "DEĞİŞTİR", "name": "Ahmet", "surname": "Yılmaz"} şeklinde action objesi oluşturulup reducer'a gönderilerek yeni bir state oluşturulabilir.
Ayrıca, reducerlar belirli bir özellik için birden fazla işlem yapabilecekleri gibi, özelliklerin bağlı ve değişken oldukları birkaç durumda da kullanılabilirler. Böylece tüm değişiklikler bir yerde yapılır ve bir başka yerde değiştirildiğinde veya silindiğinde veya eklendiğinde tüm yolların değişmesine gerek kalmaz.
Reducer'lar, uygulamanın state'leri üzerinde kontrol sahibi olabildikleri için oldukça önemlidirler. Ayrıca, hata ayıklama ve geliştirme sırasında da kullanılırlar. Eğer uygulamalarınızın daha iyi çalışmasını istiyorsanız, reducerlarınızı optimize etme konusunda dikkatli olun.
Store Yapısı ve Kullanımı
Store yapısı, Redux kütüphanesi kullanarak state kontrolü yapmak için kullanılır. Store, tüm uygulamanın state'lerinin depolandığı yerdir. Bu nedenle, birçok bileşenin state'ine erişilebilir bir hale getirir.
Store yapısı, createStore () fonksiyonu kullanılarak oluşturulur. Bu fonksiyon, bir reducer ve başlangıç state'i kabul eder. Başlangıç state'i, uygulama ilk çalıştırıldığında store'da depolanacak verilerdir.
Ayrıca, applyMiddleware () fonksiyonu ile belirtilen middleware'ler store'a eklenerek store'ı genişletmek mümkündür. Bu, store'a farklı özellikler ekleyerek, uygulamanın işlevselliğini artırmaya yardımcı olabilir.
Store yapısının kullanımında, getState () fonksiyonu store'da bulunan tüm state'leri çekmek için kullanabileceğimiz bir fonksiyondur. Birkaç farklı kısımda state'lerimizi depoladık, ancak tüm state'leri tek bir yerde yakalamak ve kontrol etmek istiyorsak, getState () fonksiyonunu kullanabiliriz.
Ayrıca, subscribe () fonksiyonu store'daki state değişikliklerini takip ederek çalışan bir fonksiyondur. Yani store'da bir değişiklik olduğunda subscribe () fonksiyonu otomatik olarak tetiklenir ve bir işlem gerçekleştirir.
Sonuç olarak, Store yapısı bir uygulamanın state'ini yönetmek için oldukça önemlidir. Bu yapının doğru kullanımı sayesinde, uygulama daha kolay yönetilebilir ve state'lerin kontrolü daha da kolaylaşır.