25b63e3a31
- `fetchAnalogeEingaengeThunk` in `AnalogeEingaengeTable.tsx` verwendet, um API-Daten in Redux zu speichern.
- `useFetchAnalogeEingaenge` entfernt, um doppelte API-Aufrufe zu vermeiden.
- Sicherstellung, dass Redux-Thunk nur im Client (`useEffect`) ausgeführt wird.
- Automatische Aktualisierung der API-Daten alle 10 Sekunden über Redux-Thunk.
- Code-Optimierungen für eine stabilere Client-Side-Architektur mit Next.js.
✅ Jetzt läuft Redux-Thunk stabil & effizient in der Next.js-Anwendung!
57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
// /redux/thunks/fetchLoopChartDataThunk.ts
|
|
import { createAsyncThunk } from "@reduxjs/toolkit";
|
|
import { fetchLoopChartData } from "../../services/fetchLoopChartData";
|
|
import { setLoopMeasurementCurveChartData } from "../slices/kabelueberwachungChartSlice";
|
|
|
|
/**
|
|
* Holt die neuesten Daten von der API und speichert sie in Redux.
|
|
*/
|
|
export const fetchLoopChartDataThunk = createAsyncThunk(
|
|
"kabelueberwachungChart/fetchLoopChartData",
|
|
async (
|
|
{
|
|
mode,
|
|
type,
|
|
slotNumber,
|
|
vonDatum,
|
|
bisDatum,
|
|
}: {
|
|
mode: "DIA0" | "DIA1" | "DIA2";
|
|
type: number;
|
|
slotNumber: number;
|
|
vonDatum: string;
|
|
bisDatum: string;
|
|
},
|
|
{ dispatch }
|
|
) => {
|
|
const data = await fetchLoopChartData(
|
|
mode,
|
|
type,
|
|
slotNumber,
|
|
vonDatum,
|
|
bisDatum
|
|
);
|
|
if (data) {
|
|
dispatch(setLoopMeasurementCurveChartData(data));
|
|
}
|
|
}
|
|
);
|
|
|
|
/**
|
|
* Starte automatisches Polling (alle 10 Sekunden).
|
|
*/
|
|
export const startLoopChartDataPolling = () => (dispatch: any) => {
|
|
setInterval(() => {
|
|
console.log("🔄 Daten werden aktualisiert...");
|
|
dispatch(
|
|
fetchLoopChartDataThunk({
|
|
mode: "DIA0",
|
|
type: 4,
|
|
slotNumber: 6,
|
|
vonDatum: "2024-02-01",
|
|
bisDatum: "2024-02-10",
|
|
})
|
|
);
|
|
}, 10000);
|
|
};
|