Odak modu
React Native
State Management (Redux)
State Management
Uygulama içerisinde global state yönetimine verilen addır.
React'da uygulama geliştirirken component yapıları belirli bir amaca göre şekillenir. Örneğin ürün satışından sorumlu componentler Product ön eki ile oluşturulur ve o componentleri amacı, bağlamı (yani contexti) "Product" yapısı olur.
İşte bizim o Product yapısından sorumlu olan ve ihtiyaç duyduğu, mantıksal olarak her yerden erişilebilen bir state yapısı kurmamıza olanak sağlayan yapılara state management yapıları adı veriyoruz.
Bunlara örnek olarak;
ya da React'in kendi Context yapısı verilebilir.
Biz endüstride de sıklıkla kullanılan Redux yapısı inceleyeceğiz.
Redux
Temel olarak üç bileşene odaklanır; store, reducer ve Provider.
store: İlgili contexte ihtiyaç duyulan statelerin tanımlamaları ve initial değerlerinin belirlendiği yapıdır. Bir JS objesidir
reducer: Belirlenen global statelerin güncellemesinden sorumlu fonksiyondur. Güncel state değerini ve tetiklenirken gönderilen parametreleri argüman olarak dönen bir fonksiyondur.
Provider: Oluşturulan yapının özel bir React componenti formunda tanımlanmasını sağlar. Bir React componentidir.
const store = createStore(
// REDUCER
(state, action) => {
return (
switch(action.type)
case: "UPDATE_USER"
const {newUser} = action.payload;
return {...state, user: newUser};
)
},
{ // STORE
user: null;
}
)
// PROVIDER
<Provider store={store}>
<App />
</Provider>
Alt componentlerin herhangi birinde kullanım şekli ise;
const User = () => {
const currentUser = useSelector(selector => selector.user);
const dispatch = useDispatch();
function updateUser(newUser){
dispatch({
type: "UPDATE_USER",
payload: { newUser }
}
);
}
return (
<SafeAreaView>
...
...
...
</SafeAreaView>
)
}
🔧
Sektörde en çok aranan yazılım becerilerini kazan
Yapay zeka desteği, birebir mentörlük saatleri, canlı dersler ve senin için özel hazırlanmış içeriklerle eksiklerini tamamla, düzenli geri bildirimler al ve öğrenme sürecini en verimli hale getir.
Yunus Emre Kabakcı
Patika+ mezunuPatika+ Fullstack Web Development Bootcamp mezunumuz Yunus Emre,
3 ay içinde Katar’dan aldığı teklif ile, global bir şirket olan Pavo Group’da işe başladı!
“İçerik zenginliği, mentor desteği, ileriye dönük bir network sağlaması ve dünyada en çok tercih edilen frameworkler üzerinden bir eğitim veriyor olması Patika+’ı tercih etmemin temel sebepleri oldu!“
Yorumlar
Yorum yapabilmek için derse kayıt olmalısın!