f9c2dc7bc9
- `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!
42 lines
956 B
TypeScript
42 lines
956 B
TypeScript
// slices/digitalInputsSlice.ts
|
|
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
|
|
|
interface DigitalInput {
|
|
id: number;
|
|
label: string;
|
|
status: boolean;
|
|
counter: number;
|
|
flutter: number;
|
|
}
|
|
|
|
interface DigitalInputsState {
|
|
inputs: DigitalInput[];
|
|
}
|
|
|
|
const initialState: DigitalInputsState = {
|
|
inputs: [],
|
|
};
|
|
|
|
const digitalInputsSlice = createSlice({
|
|
name: "digitalInputs",
|
|
initialState,
|
|
reducers: {
|
|
setInputs: (state, action: PayloadAction<DigitalInput[]>) => {
|
|
state.inputs = action.payload;
|
|
},
|
|
updateInputStatus: (
|
|
state,
|
|
action: PayloadAction<{ id: number; status: boolean }>
|
|
) => {
|
|
const { id, status } = action.payload;
|
|
const input = state.inputs.find((input) => input.id === id);
|
|
if (input) {
|
|
input.status = status;
|
|
}
|
|
},
|
|
},
|
|
});
|
|
|
|
export const { setInputs, updateInputStatus } = digitalInputsSlice.actions;
|
|
export default digitalInputsSlice.reducer;
|