Özet - Redux Toolkit
- React kursu
- İleri seviye
- Ders 24/56
- 5 dk
Bir sepet slice'ı ve store kurup bileşene bağlarsın.
Özet - Redux Toolkit
Bu grupta RTK'nin ne olduğunu, createSlice ile slice yazmayı ve configureStore ile store kurmayı öğrendin. Şimdi bunları birleştirme zamanı.
Tipik akış: createSlice ile bir sepet slice'ı yazarsın; configureStore ile store'a bağlarsın; Provider ile uygulamayı sararsın; bileşenler useSelector ve useDispatch ile sepeti okur ve değiştirir.
Bir sonraki adımda tam bir sepet akışı yazacaksın.
Uygulama Sepet bileşeni yaz
Aşağıdaki iskeleti tamamla. Cart bileşeni yaz. useSelector ile state.cart.items'ı oku (state parametresi). useDispatch ile dispatch al. <ul> içinde items.map((item, i) => <li key={i}>{item.name}</li>) döndür. export default ekle.
Başlangıç kodu
import { useSelector, useDispatch } from 'react-redux';
import { addItem } from './cartSlice';
// Cart bileşenini buraya yazÖrnek çözüm
import { useSelector, useDispatch } from 'react-redux';
import { addItem } from './cartSlice';
function Cart() {
const items = useSelector((state) => state.cart.items);
const dispatch = useDispatch();
return (
<ul>
{items.map((item, i) => (
<li key={i}>{item.name}</li>
))}
</ul>
);
}
export default Cart;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bu grupta işlenmeyen konu?
Three topics were covered; RSC was not.- createSlice
- configureStore
- Provider
- Server Components Doğru cevap
Açıklama: Server Components bu grupta işlenmedi.
2 useDispatch çağrısı
const ____ = useDispatch();const dispatch = useDispatch();Açıklama: dispatch, action'ları gönderir.