Initial state
- React Native kursu
- Orta seviye
- Ders 27/116
- 5 dk
useReducer initial state öğrenirsin.
Initial state nedir?
Initial state, useReducer'ın ikinci parametresidir; state'in başlangıç değeridir. useReducer(reducer, initialState) yazdığında ilk render'da state bu değeri alır.
Initial state çoğunlukla bir nesnedir; örneğin { count: 0, name: "" }. Ama sayı, dize veya dizi de olabilir. Bazen initial state'i bir fonksiyonla hesaplamak istersin; bu durumda useReducer(reducer, initialArg, init) üçüncü parametre olarak bir init fonksiyonu verirsin. Bu, başlangıç değerini pahalı bir işlemden geçirmek için kullanılır. Çoğu durumda ikinci parametre yeterlidir.
Nesne initial state
Bazı uygulamalarda state birden çok alandan oluşur. Bu durumda initial state bir nesne olur. Örnek: { count: 0, max: 10 }. Reducer, her action'da yeni bir nesne döndürürken diğer alanları korumalıdır.
Bu, spread desenini gerektirir: return { ...state, count: state.count + 1 }. Burada ...state mevcut alanları açar, count ise yeni değerini alır. Böylece max alanı değişmeden kalır. Reducer asla mevcut state'i doğrudan değiştirmez; her zaman yeni bir nesne döndürür. Bu yaklaşım, state değişikliklerini izlenebilir kılar.
Uygulama Nesne state ile reducer
Bir reducer yaz. state bir nesne olsun: { count: 0 }. switch (action.type) ile "increment" case'inde { ...state, count: state.count + 1 } döndür. default dalında state döndür.
Başlangıç kodu
// reducer fonksiyonunu yaz
// state bir nesne: { count: 0 }
// switch ile increment ve default dallarını yazÖrnek çözüm
function reducer(state, action) {
switch (action.type) {
case "increment":
return { ...state, count: state.count + 1 };
default:
return state;
}
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useReducer'ın ikinci parametresi nedir?
useReducer(reducer, initialState);- dispatch
- reducer
- initialState Doğru cevap
- action
Açıklama: İkinci parametre initialState'tir.
2 Spread ile güncelle
return { ____, count: state.count + 1 };return { ...state, count: state.count + 1 };Açıklama: ...state ile mevcut alanları yeni nesneye kopyalarsın.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
initialState |
Başlangıç değeri |
useReducer |
Hook çağrısı |
reducer |
State'i hesaplar |
nesne state |
Birden çok alan |