Redux Toolkit nedir?
- React kursu
- İleri seviye
- Ders 21/56
- 4 dk
Redux Toolkit'in Redux'u kolaylaştırdığını öğrenirsin.
Redux Toolkit nedir?
Redux Toolkit (RTK), Redux'in resmi ve önerilen paketidir. Standart Redux'in kalabalık iskelet kodunu azaltır; slice, store ve async thunk'ları kolaylaştırır.
RTK ile bir createSlice çağrısı reducer, action creator'ları ve immutability'yi tek seferde üretir. Bu, klasik Redux'deki onlarca satırlık iskeleti birkaç satıra indirir.
RTK içerisine immer, redux-thunk ve reselect gömülüdür; ek kurulum gerektirmez.
Slice kavramı
Bir slice, uygulamanın bir parçasından sorumlu reducer ve action'ları içeren nesnedir. Örneğin cartSlice, sepet için addItem, removeItem action'larını ve reducer'ı barındırır.
RTK createSlice ile bir slice tanımlarsın; o otomatik olarak actions ve reducer üretir. name alanı slice adını, initialState başlangıç state'i, reducers da davranışları tanımlar.
Birden çok slice, tek bir store'da birleştirilir; her slice kendi parçasını yönetir.
Uygulama cartSlice tanımla
Aşağıdaki iskeleti tamamla. createSlice ile cartSlice tanımla. name: 'cart', initialState: { items: [] }, reducers içinde addItem (state, action) => state.items.push(action.payload). Sonra export const { addItem } = cartSlice.actions; ve export default cartSlice.reducer; ekle.
Başlangıç kodu
import { createSlice } from '@reduxjs/toolkit';
// cartSlice'ı buraya tanımlaÖrnek çözüm
import { createSlice } from '@reduxjs/toolkit';
const cartSlice = createSlice({
name: 'cart',
initialState: { items: [] },
reducers: {
addItem: (state, action) => {
state.items.push(action.payload);
},
},
});
export const { addItem } = cartSlice.actions;
export default cartSlice.reducer;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Redux Toolkit neyi azaltır?
A single createSlice call replaces dozens of lines.- İskelet kodunu (boilerplate) Doğru cevap
- Çalışma süresini
- Dosya boyutunu sıfıra
- Test sayısını
Açıklama: RTK iskelet kodunu azaltır.
2 createSlice importu
import { create____ } from '@reduxjs/toolkit';import { createSlice } from '@reduxjs/toolkit';Açıklama: createSlice RTK'dan içe aktarılır.
3 Redux Toolkit nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
createSlice |
Slice üretir |
reducers |
Davranışlar |
initialState |
Başlangıç state |
name |
Slice adı |