📂 Düzen (Reducer – Slice Mantığı)

• Her reducer için ayrı bir slice dosyası oluşturmak en temiz yaklaşımdır.

• Örneğin:

  features/
    account/accountSlice.js
    customer/customerSlice.js
  

• Bu sayede proje daha modüler olur ve bakım kolaylaşır.

❌ Reducer’da API Çağrısı Yapılamaz

• Reducer’lar pure function olmalı → aynı input her zaman aynı output.
• O yüzden API çağrısı, setTimeout, Date.now gibi side effect işlemleri reducer içinde yapamayız.

🔄 Middleware ile Çözüm

Middleware, dispatch → store arasına girer.

Action önce middleware’den geçer, gerekirse orada API çağrısı yapılır, sonuç alınır → sonra store’a gönderilir.

En popüler middleware: Redux Thunk

⚡ Redux Thunk Mantığı

Action Creator senkron veya asenkron dönebilir:

// Senkron Action
export const deposit = (amount) => ({
  type: "account/deposit",
  payload: amount,
});

// Asenkron Action (Thunk)
export const depositAsync = (amount, currency) => {
  return async function (dispatch, getState) {
    if (currency === "USD") {
      dispatch({ type: "account/deposit", payload: amount });
    } else {
      const res = await fetch(`https://api.frankfurter.app/latest?amount=${amount}&from=${currency}&to=USD`);
      const data = await res.json();
      const converted = data.rates.USD;
      dispatch({ type: "account/deposit", payload: converted });
    }
  };
};

👉 Burada thunk fonksiyonu, dispatch ve getState alır.

• API çağrısı yapılır.
• Gelen sonuçla tekrar dispatch yapılır.