b847b5d2c8
- Verzeichnisstruktur unter /docs spiegelt nun die tatsächliche Projektstruktur wider - frontend/server-Trennung entfernt zugunsten von /docs/pages, /docs/redux, /docs/utils etc. - Erhöht Wiederauffindbarkeit, Übersichtlichkeit und Entwicklerfreundlichkeit
103 lines
2.6 KiB
Markdown
103 lines
2.6 KiB
Markdown
# 📦 locationDevicesFromDBSlice
|
|
|
|
Zuständig für das Laden und Speichern der Geräteinformationen pro Standort (Location) aus der Datenbank.
|
|
|
|
## 🧠 Zweck
|
|
|
|
Dieses Slice verwaltet die Geräte, die mit einem bestimmten Standort (Location) verknüpft sind.
|
|
Es nutzt ein `createAsyncThunk`, um die Daten vom Webservice bzw. von der lokalen Datenbank zu laden.
|
|
|
|
---
|
|
|
|
## 🔁 Datenfluss
|
|
|
|
1. **Dispatch `fetchLocationDevicesFromDB()`**
|
|
2. **Daten werden über `fetchLocationDevices()` geladen**
|
|
3. **Status wird aktualisiert (`loading`, `succeeded`, `failed`)**
|
|
4. **Geräte-Liste (`devices`) wird gespeichert**
|
|
|
|
---
|
|
|
|
## 🧩 Slice-Definition
|
|
|
|
```js
|
|
initialState: {
|
|
devices: [], // Geräte-Liste pro Standort
|
|
status: "idle", // "idle" | "loading" | "succeeded" | "failed"
|
|
error: null // Fehlernachricht im Fehlerfall
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🔧 Actions
|
|
|
|
| Action Type | Beschreibung |
|
|
|--------------------------------------------|--------------------------------------------------|
|
|
| `fetchLocationDevicesFromDB/pending` | Startet den Ladeprozess |
|
|
| `fetchLocationDevicesFromDB/fulfilled` | Speichert die empfangenen Geräte in `devices` |
|
|
| `fetchLocationDevicesFromDB/rejected` | Speichert die Fehlermeldung in `error` |
|
|
|
|
---
|
|
|
|
## 📥 Async Thunk
|
|
|
|
```ts
|
|
export const fetchLocationDevicesFromDB = createAsyncThunk(
|
|
"locationDevicesFromDB/fetchLocationDevicesFromDB",
|
|
async () => {
|
|
return fetchLocationDevices(); // API-Aufruf aus services/api
|
|
}
|
|
);
|
|
```
|
|
|
|
Die Funktion `fetchLocationDevices()` befindet sich unter:
|
|
|
|
```
|
|
/redux/api/fromDB/fetchLocationDevices.js
|
|
```
|
|
|
|
---
|
|
|
|
## 🧪 Verwendung in Komponenten
|
|
|
|
### Beispiel mit `useSelector` & `useDispatch`
|
|
|
|
```tsx
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { fetchLocationDevicesFromDB } from "@/redux/slices/db/locationDevicesFromDBSlice";
|
|
|
|
const dispatch = useDispatch();
|
|
const devices = useSelector((state) => state.locationDevicesFromDB.devices);
|
|
const status = useSelector((state) => state.locationDevicesFromDB.status);
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchLocationDevicesFromDB());
|
|
}, []);
|
|
```
|
|
|
|
---
|
|
|
|
## 🧩 Integration im Store
|
|
|
|
```ts
|
|
import locationDevicesFromDBReducer from "./slices/db/locationDevicesFromDBSlice";
|
|
|
|
export const store = configureStore({
|
|
reducer: {
|
|
locationDevicesFromDB: locationDevicesFromDBReducer,
|
|
// weitere Slices ...
|
|
},
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
## 📌 Hinweis
|
|
|
|
Dieses Slice ist Bestandteil der neuen Redux-Architektur (ehemals Recoil)
|
|
→ siehe auch `CHANGELOG.md` Version `1.1.97` bis `1.1.98`.
|
|
|
|
```
|
|
Pfad: /redux/slices/db/locationDevicesFromDBSlice.js
|
|
``` |