createSlice

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.

Örnek çözümü göster

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;

Kendini test et

createSlice neyi otomatik üretir?
```
Each reducer function becomes an action creator.
```
- Store'u
- Action creator'ları
- CSS dosyalarını
- Test dosyalarını
Cevabı göster

Action creator'ları — createSlice action creator'ları otomatik üretir.

reducer içinden push

addItem: (state, action) => { state.items.____(action.payload); }

Cevabı göster

addItem: (state, action) => { state.items.push(action.payload); }

createSlice: kavramları eşleştir

createSlice

Slice üretir
immer

Immutability
addItem

Action creator
dispatch

Action gönderir

Sıradaki ders: configureStore

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler