Proje: State yönetimi

State yönetimi projesinin amacını ve adımlarını gözden geçirirsin.

Proje: State yönetimi

Bu projede Redux Toolkit, Zustand ve SWR'ı bir arada kullanacaksın. Amacımız, ürün listesini çekip sepete ekleyen ve sepeti yöneten tam bir akış yazmak.

İlk ders Redux Toolkit store kurar; ikinci ders Zustand'a geçer; üçüncü ders SWR ile veri çeker. Her ders bir önceki çözümü başlangıç kodu olarak alır.

Bu yapı, gerçek e-ticaret uygulamalarının küçük bir kopyasıdır; state yönetimini uçtan uca öğrenirsin.

Proje yapısı

Üç derslik proje yapımız şöyle: her ders bir önceki çözümün başlangıç kodunu içerir, böylece kod birikir. Son derste hem veri çekme hem sepet yönetimi bir arada çalışır.

İlk derste createSlice ile sepet slice'ı yazacaksın; ikinci derste Zustand'a taşıyacaksın; üçüncü derste SWR ile ürünleri çekip sepete ekleyeceksin.

Bu, gerçek projelerde kullanılan 'state migration' akışını taklit eder; aynı ihtiyacı farklı araçlarla çözmeyi öğrenirsin.

Uygulama Sepet slice ve store

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). 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

Bu projede kullanılmayacak kütüphane?
- Redux Toolkit
- Zustand
- SWR
- Three.js
Cevabı göster

Three.js — Three.js 3D kütüphanesidir, bu projede kullanılmaz.

Sepet slice adı

const cartSlice = createSlice({ name: '____', initialState: { items: [] } });

Cevabı göster

const cartSlice = createSlice({ name: 'cart', initialState: { items: [] } });

Proje: State yönetimi: kavramları eşleştir

createSlice

Sepet slice
configureStore

Store kurar
Provider

Uygulamayı sarar
useSelector

State okur

Sıradaki ders: Redux Toolkit store

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler