Redux Toolkit
- React Native kursu
- İleri seviye
- Ders 50/83
- 5 dk
Redux Toolkit ile basitleştirilmiş Redux öğrenirsin.
Redux Toolkit
Redux Toolkit (RTK), klasik Redux'ın kalabalık iskelet kodunu sadeleştiren resmi paketidir. configureStore ile store oluşturmak, createSlice ile reducer yazmak daha az kodla mümkündür. Klasik Redux'ta her action type, action creator ve reducer ayrı ayrı yazılırdı; RTK bunları tek yerde toplar.
Kurulum: npm install @reduxjs/toolkit react-redux. configureStore, reducer anahtarını alır ve otomatik middleware kurar. react-redux paketi Provider ve useDispatch, useSelector hook'larını sağlar. RTK, modern Redux projesinin varsayılan başlangıcıdır.
configureStore ile store
configureStore({ reducer: { counter: counterReducer } }) ile store oluşturursun. reducer alanı bir nesnedir; her anahtar bir slice'ı temsil eder. RTK bu nesneyi otomatik olarak birleştirir; combineReducers yazmana gerek kalmaz.
Oluşan store'u <Provider store={store}> ile uygulamanın köküne sararsın. Böylece tüm bileşenler useDispatch ve useSelector ile store'a erişebilir. Bu kalıp App bileşeninin dönüşünde tek sefer yapılır.
Uygulama Store oluştur
Boş dosyayı tamamla. configureStore'u @reduxjs/toolkit'ten içe aktar. export const store'u configureStore({ reducer: { counter: counterReducer } }) ile tanımla. counterReducer dışa aktarılmış kabul edilir.
Başlangıç kodu
import { counterReducer } from './counterSlice';
// store'u oluşturÖrnek çözüm
import { configureStore } from '@reduxjs/toolkit';
import { counterReducer } from './counterSlice';
export const store = configureStore({
reducer: { counter: counterReducer },
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 RTK parçalarını eşle
| Kavram | Anlamı |
|---|---|
configureStore |
Store oluşturur |
createSlice |
Slice yazar |
Provider |
Store'u uygular |
react-redux |
Hook'ları sağlar |
2 RTK neyi azaltır?
- Boilerplate kod miktarını
- Animasyon kalıtesini Doğru cevap
- Uygulama boyutunu hiç
- Kamera çözünürlüğünü
Açıklama: RTK boilerplate kod miktarını azaltır.
3 configureStore çağrısı
const store = configureStore({ reducer: { ____: counterReducer } });const store = configureStore({ reducer: { counter: counterReducer } });Açıklama: counter yazılır; reducer nesnesinin anahtarı budur.