configureStore
- React kursu
- İleri seviye
- Ders 23/56
- 4 dk
Store'u kurup Provider ile sarmayı öğrenirsin.
configureStore
configureStore, RTK'nin store kurucu fonksiyonudur. Klasik Redux'deki combineReducers + applyMiddleware + compose zincirini tek bir çağrıya indirir.
reducer alanına slice'larını nesne olarak verirsin: { cart: cartReducer, product: productReducer }. RTK otomatik olarak combineReducers uygular.
RTK store'u redux-thunk ile gelir; bu sayede async işlemler için ek middleware gerekmez. DevTools da otomatik etkindir.
Provider ile sarma
Store'u uygulamaya bağlamak için Provider bileşeni kullanılır. <Provider store={store}><App /></Provider> biçiminde tüm uygulamayı sararsın.
Böylece tüm alt bileşenler useSelector ve useDispatch ile store'a erişebilir. Provider, React context tabanlı çalışır.
Store tek seferlik oluşturulur; her çizimde yeniden üretilmez. Bu yüzden main.jsx içinde modül seviyesinde tanımlanır.
Uygulama Store kur ve Provider sar
Aşağıdaki iskeleti tamamla. configureStore ile store oluştur; reducer olarak { cart: cartReducer } kullan. 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 configureStore neyi otomatik ekler?
Thunk is ready for async work.- CSS reset
- Tailwind CSS
- redux-thunk middleware Doğru cevap
- React Router
Açıklama: configureStore redux-thunk'ı otomatik ekler.
2 Provider kullanımı
<____ store={store}><App /></Provider><Provider store={store}><App /></Provider>Açıklama: Provider store'u uygulamaya bağlar.
3 configureStore: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
configureStore |
Store kurar |
Provider |
Uygulamayı sarar |
useSelector |
State okur |
useDispatch |
Action gönderir |