Proje: State yönetimi
- React kursu
- İleri seviye
- Ders 29/56
- 4 dk
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.
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 Bu projede kullanılmayacak kütüphane?
- Redux Toolkit
- Zustand
- SWR
- Three.js Doğru cevap
Açıklama: Three.js 3D kütüphanesidir, bu projede kullanılmaz.
2 Sepet slice adı
const cartSlice = createSlice({ name: '____', initialState: { items: [] } });const cartSlice = createSlice({ name: 'cart', initialState: { items: [] } });Açıklama: name alanı küçük harf 'cart' olur.
3 Proje: State yönetimi: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
createSlice |
Sepet slice |
configureStore |
Store kurar |
Provider |
Uygulamayı sarar |
useSelector |
State okur |