Redux Toolkit store
- React kursu
- İleri seviye
- Ders 30/56
- 5 dk
Bir ürün slice'ı ve store kurarsın.
Redux Toolkit store kurulumu
Bu derste configureStore ile store kurup Provider ile uygulamayı saracaksın. Sepet slice'ı store'a bağlanır; bileşenler useSelector ve useDispatch ile erişir.
Başlangıç kodu, önceki dersin çözümünü içerir; sen store ve Provider kodunu eklersin. Bu, proje akışının doğal devamıdır.
RTK store, redux-thunk ile gelir; async işlemler için ek middleware gerekmez. DevTools da otomatik etkindir.
useSelector ve useDispatch
Bileşenlerde useSelector ile state okur, useDispatch ile action gönderirsin. Örneğin const items = useSelector((state) => state.cart.items) sepeti okur.
Bir ürün eklemek için const dispatch = useDispatch() alır, dispatch(addItem(product)) çağırırsın. RTK action creator'ları otomatik payload ekler.
Selector, yalnızca ilgili parça değiştiğinde çizimi tetikler; bu yüzden ince taneli selector'ler performansı artırır.
Uygulama Store kur ve Cart bileşeni yaz
Aşağıdaki iskeleti tamamla. configureStore ile store oluştur; reducer: { cart: cartReducer }. cartReducer'ı './cartSlice''tan içe aktar. export default store ekle.
Başlangıç kodu
import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';
// store'u buraya tanımlaÖrnek çözüm
import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';
const store = configureStore({
reducer: {
cart: cartReducer,
},
});
export default store;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Provider ne yapar?
Provider = store + app.- Store'u oluşturur
- Store'u uygulamaya bağlar Doğru cevap
- CSS yükler
- Test çalıştırır
Açıklama: Provider store'u uygulamaya bağlar.
2 useSelector çağrısı
const items = ____((state) => state.cart.items);const items = useSelector((state) => state.cart.items);Açıklama: useSelector state okur.
3 Redux Toolkit store: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
configureStore |
Store kurar |
Provider |
Uygulamayı sarar |
useSelector |
State okur |
addItem |
Action creator |