feat: Redux-Thunk für digitale Eingänge integriert & UI mit zwei Tabellen umgesetzt

- `fetchDigitaleEingaengeThunk.ts` erstellt, um digitale Eingänge in Redux zu speichern.
- `fetchDigitaleEingaenge.ts` erstellt, um API-Daten aus `de.js` zu laden.
- `digitalInputsSlice.ts` hinzugefügt, um digitale Eingänge in Redux zu verwalten.
- `DigitalInputs.tsx` überarbeitet: Zwei Tabellen für digitale Eingänge hinzugefügt.
- Sicherstellung, dass Redux-Thunk nur im Client (`useEffect`) ausgeführt wird.
- API-Calls werden nun alle 10 Sekunden aktualisiert.

 Jetzt läuft Redux-Thunk stabil & effizient für digitale Eingänge!
This commit is contained in:
ISA
2025-03-19 15:33:23 +01:00
parent 25b63e3a31
commit f9c2dc7bc9
8 changed files with 110 additions and 86 deletions

View File

@@ -4,7 +4,6 @@
import { useEffect, useState } from "react";
import { Provider } from "react-redux";
import store, { useAppDispatch } from "../redux/store";
import { fetchAnalogeEingaengeThunk } from "../redux/thunks/fetchAnalogeEingaengeThunk";
import { loadWindowVariables } from "../utils/loadWindowVariables";
import Header from "../components/header/Header";
import Navigation from "../components/navigation/Navigation";
@@ -19,6 +18,8 @@ import {
setOpcUaActiveClientCount,
setOpcUaNodesetName,
} from "../redux/slices/opcuaSettingsSlice";
import { fetchAnalogeEingaengeThunk } from "../redux/thunks/fetchAnalogeEingaengeThunk";
import { fetchDigitaleEingaengeThunk } from "../redux/thunks/fetchDigitaleEingaengeThunk";
function MyApp({ Component, pageProps }: AppProps) {
return (
@@ -95,7 +96,7 @@ function AppContent({ Component, pageProps }: AppProps) {
return () => clearInterval(intervalId);
}
}, []);
//---------------------------------------------------------
useEffect(() => {
if (typeof window !== "undefined") {
dispatch(fetchAnalogeEingaengeThunk());
@@ -105,7 +106,17 @@ function AppContent({ Component, pageProps }: AppProps) {
return () => clearInterval(interval);
}
}, [dispatch]);
//---------------------------------------------------------
useEffect(() => {
if (typeof window !== "undefined") {
dispatch(fetchDigitaleEingaengeThunk());
const interval = setInterval(() => {
dispatch(fetchDigitaleEingaengeThunk());
}, 10000);
return () => clearInterval(interval);
}
}, [dispatch]);
//---------------------------------------------------------
return (
<div className="flex flex-col h-screen overflow-hidden">
<WindowVariablesInitializer />