feat: Redux-Integration für TDR-Daten verbessert
- TDR-Daten werden jetzt beim Laden der Kabelüberwachungsseite automatisch abgerufen. - Fehler im Thunk behoben: Initial leere `tdrChart.data` wird nun korrekt aktualisiert. - Überprüfung, ob neue Daten vorhanden sind, verbessert (keine unnötige Ablehnung bei Erstabruf). - Korrekte JSON-Datei-Pfade (`slot0.json` bis `slot31.json`) in Fetch-Requests implementiert. - Redux-Error-Handling optimiert: Falls keine gültigen Daten geladen werden, wird eine Meldung angezeigt. - Logging für geladene Daten hinzugefügt, um die Debugging-Möglichkeiten zu verbessern. - `fetchAllTDRChartData.ts` als überflüssige Datei entfernt (Thunks übernehmen jetzt den Abruf). - `kabelueberwachung.tsx` so angepasst, dass der Chart sofort mit geladenen Daten arbeitet.
This commit is contained in:
@@ -1,40 +1,41 @@
|
||||
// /redux/slices/tdrChartSlice.ts
|
||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||
import { fetchAllTDRChartData } from "../thunks/fetchAllTDRChartThunk";
|
||||
|
||||
// 🔹 State-Interface
|
||||
interface TDRChartState {
|
||||
dateiListe: string[];
|
||||
sortAscending: boolean;
|
||||
tdrChartData: { t: number; m: number }[];
|
||||
data: any[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
// 🔹 Anfangsstate
|
||||
const initialState: TDRChartState = {
|
||||
dateiListe: [],
|
||||
sortAscending: true,
|
||||
tdrChartData: [],
|
||||
data: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
// 🔹 Redux Slice
|
||||
const tdrChartSlice = createSlice({
|
||||
name: "tdrChart",
|
||||
initialState,
|
||||
reducers: {
|
||||
setDateiListe: (state, action: PayloadAction<string[]>) => {
|
||||
state.dateiListe = action.payload;
|
||||
},
|
||||
toggleSortOrder: (state) => {
|
||||
state.sortAscending = !state.sortAscending;
|
||||
state.dateiListe.reverse(); // 🔄 Reihenfolge umkehren
|
||||
},
|
||||
setTDRChartData: (
|
||||
state,
|
||||
action: PayloadAction<{ t: number; m: number }[]>
|
||||
) => {
|
||||
state.tdrChartData = action.payload;
|
||||
},
|
||||
reducers: {},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
.addCase(fetchAllTDRChartData.pending, (state) => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(
|
||||
fetchAllTDRChartData.fulfilled,
|
||||
(state, action: PayloadAction<any[]>) => {
|
||||
state.loading = false;
|
||||
state.data = action.payload; // Speichere die neuen Daten in Redux
|
||||
}
|
||||
)
|
||||
.addCase(fetchAllTDRChartData.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.payload as string | null;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export const { setDateiListe, toggleSortOrder, setTDRChartData } =
|
||||
tdrChartSlice.actions;
|
||||
export default tdrChartSlice.reducer;
|
||||
|
||||
45
redux/thunks/fetchAllTDRChartThunk.ts
Normal file
45
redux/thunks/fetchAllTDRChartThunk.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
// /redux/thunks/fetchAllTDRChartThunk.ts
|
||||
import { createAsyncThunk } from "@reduxjs/toolkit";
|
||||
import { RootState } from "../store";
|
||||
|
||||
const BASE_PATH = "/CPLmockData/LastTDR/jsonDatei";
|
||||
|
||||
export const fetchAllTDRChartData = createAsyncThunk(
|
||||
"tdrChart/fetchAllTDRChartData",
|
||||
async (_, { getState, rejectWithValue }) => {
|
||||
const state: RootState = getState() as RootState;
|
||||
const currentData = state.tdrChart.data; // Aktuelle Redux-Daten
|
||||
|
||||
const fileNames = Array.from({ length: 32 }, (_, i) => `slot${i}.json`);
|
||||
const fetchPromises = fileNames.map(async (fileName) => {
|
||||
try {
|
||||
const response = await fetch(`${BASE_PATH}/${fileName}`);
|
||||
if (!response.ok)
|
||||
throw new Error(`Fehler bei ${fileName}: ${response.statusText}`);
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error(`Fehler beim Laden von ${fileName}:`, error);
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
const newData = await Promise.all(fetchPromises);
|
||||
|
||||
console.log("Geladene Daten:", newData);
|
||||
|
||||
// Falls die Daten leer oder identisch sind, aber initial leer waren, trotzdem speichern
|
||||
if (newData.every((d) => d === null || d === undefined)) {
|
||||
console.warn("⚠ Keine gültigen Daten empfangen.");
|
||||
return rejectWithValue("Keine gültigen Daten empfangen.");
|
||||
}
|
||||
|
||||
if (
|
||||
JSON.stringify(currentData) !== JSON.stringify(newData) ||
|
||||
currentData.length === 0
|
||||
) {
|
||||
return newData;
|
||||
} else {
|
||||
return rejectWithValue("Keine Änderungen in den Daten.");
|
||||
}
|
||||
}
|
||||
);
|
||||
Reference in New Issue
Block a user