React
Context + useReducer
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.
Örnek çözümü göster
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;
Kendini test et
-
useReducer ne döndürür?
- [value, setValue]
- tek değer
- [state, dispatch]
- [data, error]
Cevabı göster
[state, dispatch] — useReducer [state, dispatch] döndürür.
-
Dispatch görevi
Dispatch, aksiyon nesnesini ____ fonksiyonuna gönderir.
Cevabı göster
Dispatch, aksiyon nesnesini reducer fonksiyonuna gönderir.
-
useReducer + context adımlarını eşleştir
- useReducer
- [state, dispatch]
- StateContext
- state tutar
- DispatchContext
- dispatch tutar
- dispatch
- aksiyon
Sıradaki ders: Varsayılan değer ve hata
