App Slice

Açıklama: App Slice, Redux aracılığıyla global uygulama durumunu yönetmek için kullanılır. Özellikle modalların görünürlüğü ve içerik yönetimi gibi uygulama genelinde kullanılan durumlar için uygundur.

Kod

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface AppState {
  modalVisible: boolean;
  modalData: any;
}

const initialState: AppState = {
  modalVisible: false,
  modalData: null,
};

const appSlice = createSlice({
  name: "app",
  initialState,
  reducers: {
    setOpsModalVisible(state, action: PayloadAction<boolean>) {
      state.modalVisible = action.payload;
    },
    setOpsModalData(state, action: PayloadAction<any>) {
      state.modalData = action.payload;
    },
  },
});

export const { setOpsModalVisible, setOpsModalData } = appSlice.actions;
export default appSlice.reducer;

Ne İşe Yarar?

• Modal Yönetimi: Uygulama genelinde kullanılan modal bileşenlerinin görünürlüğünü kontrol eder.
• Veri Yönetimi: Modalda gösterilecek verileri saklar ve günceller.

Anahtar Fonksiyonlar

1. setOpsModalVisible

Açıklama: Modal görünürlüğünü günceller.

Parametre	Tipi	Açıklama
payload	boolean	Modalın açık veya kapalı olduğunu belirtir.

Kullanım Alanları:

ActionsCell

• Amaç: Düzenleme işlemleri sırasında modalı açmak veya kapatmak.

AppDispatch(setOpsModalVisible(true));

2. setOpsModalData

Açıklama: Modalda gösterilecek verileri günceller.

Parametre	Tipi	Açıklama
payload	any	Modalda görüntülenecek veri.

Kullanım Alanları:

handleEdit

• Amaç: API'den gelen düzenlenecek verileri modalda göstermek.

AppDispatch(setOpsModalData(responseData));

İş Mantığı

1. Başlangıç Durumu:

   • Modal varsayılan olarak kapalıdır (modalVisible: false).
   • Modal verisi boş olarak başlar (modalData: null).

2. Durum Güncellemeleri:

   • setOpsModalVisible modalın açık/kapalı durumunu değiştirir.
   • setOpsModalData, modalda görüntülenecek veriyi günceller.

3. Redux Store Entegrasyonu:

   • Diğer bileşenler bu durumu dinleyerek modalın durumuna tepki verebilir.

Önemli İpuçları

• Performans Optimizasyonu: Modal görünürlüğü veya verisi güncellenirken yalnızca ilgili bileşenler yeniden render edilir.
• Hata Yönetimi: API'den gelen veriler hatalıysa, setOpsModalData çağrılmadan önce kontrol edilmelidir.
• Kullanım Kolaylığı: useSelector ve useDispatch kullanılarak bileşenlerde kolayca entegre edilebilir.