Odak modu
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.
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>
)
}
🔧
Yorum yapabilmek için derse kayıt olmalısın!