Redux Toolkit nedir?

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.

Örnek çözümü göster

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;

Kendini test et

Redux Toolkit neyi azaltır?
```
A single createSlice call replaces dozens of lines.
```
- İskelet kodunu (boilerplate)
- Çalışma süresini
- Dosya boyutunu sıfıra
- Test sayısını
Cevabı göster

İskelet kodunu (boilerplate) — RTK iskelet kodunu azaltır.

createSlice importu

import { create____ } from '@reduxjs/toolkit';

Cevabı göster

import { createSlice } from '@reduxjs/toolkit';

Redux Toolkit nedir: kavramları eşleştir

createSlice

Slice üretir
reducers

Davranışlar
initialState

Başlangıç state
name

Slice adı

Sıradaki ders: createSlice

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler