Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Redux-Thunk für analoge Eingänge integriert & useFetchAnalogeEingaenge entfernt

Browse Source 
- `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!
This commit is contained in:
ISA
2025-03-19 14:48:19 +01:00
parent f957d477c8
commit 25b63e3a31
13 changed files with 303 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
View File

@@ -1,19 +1,20 @@
"use client"; // components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../redux/store";
import { useFetchAnalogeEingaenge } from "./hooks/useFetchAnalogeEingaenge";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from "../../../redux/store";
import { fetchAnalogeEingaengeThunk } from "../../../redux/thunks/fetchAnalogeEingaengeThunk";
export default function AnalogeEingaengeTable() {
useFetchAnalogeEingaenge();
const dispatch = useDispatch<AppDispatch>();
useEffect(() => {
dispatch(fetchAnalogeEingaengeThunk()); // ✅ Holt die API-Daten nur im Client
}, [dispatch]);
const analogeEingaenge = useSelector(
(state: RootState) => state.analogeEingaenge
);
console.log("Aktuelle Redux-Daten:", analogeEingaenge);
// State für das geöffnete Modal
const [selectedEingang, setSelectedEingang] = useState(null);
const openSettingsModal = (eingang: any) => {
@@ -115,71 +116,6 @@ export default function AnalogeEingaengeTable() {
defaultValue="Spg."
readOnly
/>
<div className="grid grid-cols-4 gap-2 mt-4">
<div>
<label className="block text-sm text-gray-700">uG:</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
<div>
<label className="block text-sm text-gray-700">uW:</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
<div>
<label className="block text-sm text-gray-700">oW:</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
<div>
<label className="block text-sm text-gray-700">oG:</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
</div>
<div className="grid grid-cols-3 gap-2 mt-4">
<div>
<label className="block text-sm text-gray-700">Faktor:</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
<div>
<label className="block text-sm text-gray-700">Offset:</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
<div>
<label className="block text-sm text-gray-700">
Filterzeit:
</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
</div>
<label className="block text-sm text-gray-700 mt-2">
Datenlogger:
</label>
<select className="w-full border px-2 py-1 rounded">
<option>aus</option>
<option>ein</option>
</select>
</div>
<div className="flex justify-end mt-4">

30
components/main/analogeEingaenge/hooks/useFetchAnalogeEingaenge.ts
View File

@@ -1,30 +0,0 @@
// components/main/analogeEingaenge/hooks/useFetchAnalogeEingaenge.ts
import { useEffect } from "react";
import { useAppDispatch } from "../../../../redux/store"; // ✅ Typisierte Dispatch-Funktion verwenden
import {
loadFromWindow,
setAnalogeEingaenge,
} from "../../../../redux/slices/analogeEingaengeSlice";
export const useFetchAnalogeEingaenge = () => {
const dispatch = useAppDispatch(); // ✅ Verwende typisierten Dispatch
useEffect(() => {
dispatch(loadFromWindow()); // Initial Mock-Daten aus `window` laden
const interval = setInterval(async () => {
try {
dispatch(loadFromWindow()); // 🔄 Mock-Daten regelmäßig neu laden
const response = await fetch("/api/get-embedded-data");
if (!response.ok) throw new Error("Fehler beim Abrufen der Daten");
const data = await response.json();
dispatch(setAnalogeEingaenge(data)); // ✅ API-Daten in Redux speichern
} catch (error) {
console.error("Fehler beim Abruf der Sensordaten:", error);
}
}, 5000); // Alle 5 Sekunden neue Daten abrufen
return () => clearInterval(interval);
}, [dispatch]);
};