createSlice
- React kursu
- İleri seviye
- Ders 22/56
- 4 dk
Bir slice ve reducer yazmayı öğrenirsin.
createSlice detayları
createSlice, reducers içinde tanımladığın her fonksiyon için otomatik bir action creator üretir. Fonksiyon adı addItem ise action type cart/addItem olur.
RTK, immer sayesinde state.items.push(...) gibi mutasyonlara izin verir; sen normal JS yazar gibi yazarsın, ama state yine de immutably güncellenir.
Bir action'ı dispatch etmek için dispatch(addItem(product)) çağırırsın; payload otomatik eklenir.
Immer ile immutability
RTK, immer kütüphanesini kullanır. Bu sayede reducer içinde state.items.push(...) yazabilirsin; immer arka planda bu değişikliği yeni bir state olarak üretir.
Bu, klasik Redux'deki { ...state, items: [...state.items, payload] } spread karmaşasını ortadan kaldırır. Kod daha okunaklı olur.
Immer, proxy tabanlı çalışır; yalnızca değişen dalları kopyalar, gerisini paylaşır. Bu da performansı yüksek tutar.
Uygulama productSlice tanımla
Aşağıdaki iskeleti tamamla. createSlice ile productSlice tanımla. name: 'product', initialState: { list: [] }, reducers içinde addProduct (state, action) => state.list.push(action.payload). export const { addProduct } = productSlice.actions; ve export default productSlice.reducer; ekle.
Başlangıç kodu
import { createSlice } from '@reduxjs/toolkit';
// productSlice'ı buraya tanımlaÖrnek çözüm
import { createSlice } from '@reduxjs/toolkit';
const productSlice = createSlice({
name: 'product',
initialState: { list: [] },
reducers: {
addProduct: (state, action) => {
state.list.push(action.payload);
},
},
});
export const { addProduct } = productSlice.actions;
export default productSlice.reducer;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 createSlice neyi otomatik üretir?
Each reducer function becomes an action creator.- Store'u
- Action creator'ları Doğru cevap
- CSS dosyalarını
- Test dosyalarını
Açıklama: createSlice action creator'ları otomatik üretir.
2 reducer içinden push
addItem: (state, action) => { state.items.____(action.payload); }addItem: (state, action) => { state.items.push(action.payload); }Açıklama: push, item'ı diziye ekler.
3 createSlice: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
createSlice |
Slice üretir |
immer |
Immutability |
addItem |
Action creator |
dispatch |
Action gönderir |