E Ticaret Sitesi

Sorun

Küçük işletmeler için geliştirilen bu e-ticaret yönetim panelinde, farklı modüller (ürün listesi, stok hareketleri ve sipariş takibi) arasında anlık veri senkronizasyonunu ve global durum yönetimini sağlamak en kritik gereksinimlerden biriydi.

Proje sürecinde Redux kütüphanesini ilk kez kullanıyordum. İlk denemelerimde bileşenler arası aksiyonların tetiklenmesi (dispatch) ve global state güncellemelerinin UI bileşenlerine doğru zamanlama ile yansıtılması noktasında zorluklar yaşadım. Tetikleme yapısını doğru kurgulayamadığım için ürün listesindeki bir değişikliğin veya sipariş sonrasındaki stok düşümünün global store üzerinde anında güncellenmemesi ve tutarsız veri akışları oluşması çözülmesi gereken temel sorundu.

Ne yaptım

• Redux Mimarisi ve State Kurgusu: Redux Toolkit (RTK) yapısını projeye adapte ederek ürünler, stok hareketleri ve siparişler için modüler slice yapısı ve merkezi bir store kurguladım.
• Global Aksiyon Tetikleme Sorununun Çözümü: İlk aşamada yaşadığım tetikleme ve senkronizasyon problemlerini gidermek için bileşen düzeyindeki handler fonksiyonlarını ve useDispatch hook kullanımını yeniden yapılandırdım. Asenkron API isteklerini createAsyncThunk ile sarmalayarak global aksiyonların (fetching, updating) tüm bileşenler tarafından doğru şekilde dinlenmesini sağladım.
• Bileşen Senkronizasyonu: Sipariş alındığında veya stok güncellendiğinde UI bileşenlerinin useSelector üzerinden güncel state'i anlık olarak render etmesini sağladım.
• Full-Stack Mimari Entegrasyonu:
  • Frontend: React, Redux, JavaScript ve Bootstrap ile duyarlı (responsive) ve kullanımı kolay bir admin paneli arayüzü tasarladım.
  • Backend: C#, ASP.NET Core, Entity Framework Core ve MySQL altyapısını kullanarak RESTful API uç noktaları geliştirdim ve stok yönetim iş mantığını sunucu tarafında yapılandırdım.

Teknik notlar

// Redux Toolkit ile async thunk ve stok güncelleme aksiyonu
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

export const updateStock = createAsyncThunk(
  'stock/updateStock',
  async ({ productId, newQuantity }, { rejectWithValue }) => {
    try {
      const response = await axios.put(`/api/products/${productId}/stock`, {
        quantity: newQuantity,
      });
      return response.data;
    } catch (err) {
      return rejectWithValue(err.response.data);
    }
  }
);