Context + useReducer
- React kursu
- Orta seviye
- Ders 10/80
- 4 dk
Context ile global bir useReducer state yönetmeyi öğrenirsin.
Context + useReducer
Büyük state'lerde useState yetersiz kalır. useReducer + context birleşimi, küresel state yönetimi için klasik bir desendir. Redux benzeri bir yapı elde edilir.
Yapı: const [state, dispatch] = useReducer(reducer, initial);. Sonra <StateContext.Provider value={ '{ state }' }><DispatchContext.Provider value={ '{ dispatch }' }>...</DispatchContext.Provider></StateContext.Provider> ile sar.
State ve dispatch ayrı context'lerde tutulursa, yalnızca dispatch kullanan bileşenler state değişiminden etkilenmez. Bu, önceki dersin performans ipucuyla aynı yöntemdir.
İç içe Provider
İki context'i iç içe sarmak yaygın bir desendir. Dışta StateContext.Provider, içte DispatchContext.Provider. İkisi de aynı useReducer çağrısının sonucunu paylaşır.
Sarmalama sırası önemli değildir ama okunurluk için state önce, dispatch sonra önerilir. Tüketen bileşenler istediği context'i bağımsız okur.
Bu desen, bileşen ağacının herhangi bir yerinden dispatch({ '{ type: "ADD" }' }) çağrısı yapmaya izin verir. State'i değiştiren tek yer reducer olduğu için akış öngörülebilir kalır.
Uygulama AppProvider yaz
Aşağıdaki iskeleti tamamla. AppProvider bileşeni yaz. useReducer(reducer, initialState) çağır; [state, dispatch] olarak çöz. <StateContext.Provider value={ '{ state }' }> içinde <DispatchContext.Provider value={ '{ dispatch }' }>...</DispatchContext.Provider></StateContext.Provider> döndür; çocukları children prop'undan al. Dışa aktar.
Başlangıç kodu
// AppProvider bileşenini buraya yazÖrnek çözüm
function AppProvider({ children }) {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<StateContext.Provider value={state}>
<DispatchContext.Provider value={dispatch}>
{children}
</DispatchContext.Provider>
</StateContext.Provider>
);
}
export default AppProvider;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useReducer ne döndürür?
- [value, setValue]
- tek değer
- [state, dispatch] Doğru cevap
- [data, error]
Açıklama: useReducer [state, dispatch] döndürür.
2 Dispatch görevi
Dispatch, aksiyon nesnesini ____ fonksiyonuna gönderir.Dispatch, aksiyon nesnesini reducer fonksiyonuna gönderir.Açıklama: Dispatch, reducer'a aksiyon gönderir.
3 useReducer + context adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
useReducer |
[state, dispatch] |
StateContext |
state tutar |
DispatchContext |
dispatch tutar |
dispatch |
aksiyon |