# 🧭 poiTypesSlice

Verwaltet die Point-of-Interest (POI) Typen, die vom Server bereitgestellt werden – z. B. für die Darstellung von Symbolen oder Layer-Kategorien in der Karte.

---

## 📍 Datei

```
/redux/slices/db/poiTypesSlice.js
```

---

## 📦 Initialer State

```ts
{
  data: [],       // Liste der POI-Typen
  status: "idle"  // Ladezustand: "idle" | "loading" | "succeeded" | "failed"
}
```

---

## ⚙️ Async Thunk: `fetchPoiTypes`

```ts
export const fetchPoiTypes = createAsyncThunk("poiTypes/fetchPoiTypes", async () => {
  let API_BASE_URL = "";

  if (typeof window !== "undefined") {
    API_BASE_URL = `${window.location.protocol}//${window.location.hostname}:3000`;
  } else {
    API_BASE_URL = "http://localhost:3000";
  }

  const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/poiTyp/readPoiTyp`);
  return await response.json();
});
```

---

## 🔁 Lifecycle im Slice

| Zustand            | Beschreibung                         |
|--------------------|--------------------------------------|
| `pending`          | Setzt `status = "loading"`           |
| `fulfilled`        | Speichert `payload` in `state.data` und setzt `status = "succeeded"` |
| `rejected`         | Setzt `status = "failed"`            |

---

## 🧪 Verwendung im Component

```tsx
import { useSelector, useDispatch } from "react-redux";
import { fetchPoiTypes } from "@/redux/slices/db/poiTypesSlice";

const dispatch = useDispatch();
const poiTypes = useSelector((state) => state.poiTypes.data);
const status = useSelector((state) => state.poiTypes.status);

useEffect(() => {
  dispatch(fetchPoiTypes());
}, []);
```

---

## 🧩 Store Integration

```ts
import poiTypesReducer from "./slices/db/poiTypesSlice";

export const store = configureStore({
  reducer: {
    poiTypes: poiTypesReducer,
    // weitere ...
  },
});
```

---

## 🌐 API-Endpunkt

```http
GET /api/talas_v5_DB/poiTyp/readPoiTyp
```

Erwartet JSON-Antwort mit allen verfügbaren POI-Typen für die App.