feat: Redux Slice für last20Messages ausgelagert und strukturiert umbenannt
- dashboardSlice in last20MessagesSlice umbenannt - Redux Store Key von 'dashboard' auf 'last20Messages' geändert - fetchLast20MessagesThunk angepasst: neuer Action-Name 'last20Messages/fetchLast20Messages' - Komponente Last20MessagesTable aktualisiert: useSelector verweist jetzt auf state.last20Messages - Struktur für zukünftige Erweiterung vorbereitet
This commit is contained in:
@@ -2,14 +2,14 @@
|
|||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import { useSelector, useDispatch } from "react-redux";
|
import { useSelector, useDispatch } from "react-redux";
|
||||||
import { RootState } from "../../../redux/store";
|
import { RootState } from "../../../redux/store";
|
||||||
import { setLast20Messages } from "../../../redux/slices/dashboardSlice";
|
import { setLast20Messages } from "../../../redux/slices/last20MessagesSlice";
|
||||||
|
|
||||||
const Last20MessagesTable: React.FC = () => {
|
const Last20MessagesTable: React.FC = () => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
// Holt last20Messages aus Redux
|
// Holt last20Messages aus Redux
|
||||||
const rawLast20Messages = useSelector(
|
const rawLast20Messages = useSelector(
|
||||||
(state: RootState) => state.dashboard.last20Messages
|
(state: RootState) => state.last20Messages.last20Messages
|
||||||
);
|
);
|
||||||
|
|
||||||
// Holt Daten aus `window.win_last20Messages` und speichert sie in Redux
|
// Holt Daten aus `window.win_last20Messages` und speichert sie in Redux
|
||||||
|
|||||||
@@ -6,5 +6,5 @@
|
|||||||
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
||||||
|
|
||||||
*/
|
*/
|
||||||
const webVersion = "1.6.162";
|
const webVersion = "1.6.163";
|
||||||
export default webVersion;
|
export default webVersion;
|
||||||
|
|||||||
@@ -1,23 +0,0 @@
|
|||||||
// /redux/slices/dashboardSlice.ts
|
|
||||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
|
||||||
|
|
||||||
interface DashboardState {
|
|
||||||
last20Messages: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const initialState: DashboardState = {
|
|
||||||
last20Messages: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
export const dashboardSlice = createSlice({
|
|
||||||
name: "dashboard",
|
|
||||||
initialState,
|
|
||||||
reducers: {
|
|
||||||
setLast20Messages: (state, action: PayloadAction<string | null>) => {
|
|
||||||
state.last20Messages = action.payload;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const { setLast20Messages } = dashboardSlice.actions;
|
|
||||||
export default dashboardSlice.reducer;
|
|
||||||
23
redux/slices/last20MessagesSlice.ts
Normal file
23
redux/slices/last20MessagesSlice.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
// /redux/slices/last20MessagesSlice.ts
|
||||||
|
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||||
|
|
||||||
|
interface Last20MessagesSlice {
|
||||||
|
last20Messages: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialState: Last20MessagesSlice = {
|
||||||
|
last20Messages: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const last20MessagesSlice = createSlice({
|
||||||
|
name: "last20Messages",
|
||||||
|
initialState,
|
||||||
|
reducers: {
|
||||||
|
setLast20Messages: (state, action: PayloadAction<string | null>) => {
|
||||||
|
state.last20Messages = action.payload;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const { setLast20Messages } = last20MessagesSlice.actions;
|
||||||
|
export default last20MessagesSlice.reducer;
|
||||||
@@ -6,7 +6,7 @@ import variablesReducer from "./slices/variablesSlice";
|
|||||||
import kueChartModeReducer from "./slices/kueChartModeSlice";
|
import kueChartModeReducer from "./slices/kueChartModeSlice";
|
||||||
import webVersionReducer from "./slices/webVersionSlice";
|
import webVersionReducer from "./slices/webVersionSlice";
|
||||||
import kabelueberwachungChartReducer from "./slices/kabelueberwachungChartSlice";
|
import kabelueberwachungChartReducer from "./slices/kabelueberwachungChartSlice";
|
||||||
import dashboardReducer from "./slices/dashboardSlice";
|
import last20MessagesReducer from "./slices/last20MessagesSlice";
|
||||||
import systemSettingsReducer from "./slices/systemSettingsSlice";
|
import systemSettingsReducer from "./slices/systemSettingsSlice";
|
||||||
import opcuaSettingsReducer from "./slices/opcuaSettingsSlice";
|
import opcuaSettingsReducer from "./slices/opcuaSettingsSlice";
|
||||||
import digitalOutputsReducer from "./slices/digitalOutputsSlice";
|
import digitalOutputsReducer from "./slices/digitalOutputsSlice";
|
||||||
@@ -27,7 +27,7 @@ const store = configureStore({
|
|||||||
webVersion: webVersionReducer,
|
webVersion: webVersionReducer,
|
||||||
digitalInputs: digitalInputsReducer,
|
digitalInputs: digitalInputsReducer,
|
||||||
kabelueberwachungChart: kabelueberwachungChartReducer,
|
kabelueberwachungChart: kabelueberwachungChartReducer,
|
||||||
dashboard: dashboardReducer,
|
last20Messages: last20MessagesReducer,
|
||||||
systemSettings: systemSettingsReducer,
|
systemSettings: systemSettingsReducer,
|
||||||
opcuaSettings: opcuaSettingsReducer,
|
opcuaSettings: opcuaSettingsReducer,
|
||||||
digitalOutputs: digitalOutputsReducer,
|
digitalOutputs: digitalOutputsReducer,
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
import { createAsyncThunk } from "@reduxjs/toolkit";
|
import { createAsyncThunk } from "@reduxjs/toolkit";
|
||||||
import { fetchLast20MessagesFromWindow } from "../../services/fetchLast20Messages";
|
import { fetchLast20MessagesFromWindow } from "../../services/fetchLast20Messages";
|
||||||
import { setLast20Messages } from "../slices/dashboardSlice";
|
import { setLast20Messages } from "../slices/last20MessagesSlice";
|
||||||
|
|
||||||
export const fetchLast20MessagesThunk = createAsyncThunk(
|
export const fetchLast20MessagesThunk = createAsyncThunk(
|
||||||
"dashboard/fetchLast20Messages",
|
"last20Messages/fetchLast20Messages",
|
||||||
async (_, { dispatch }) => {
|
async (_, { dispatch }) => {
|
||||||
const messages = await fetchLast20MessagesFromWindow();
|
const messages = await fetchLast20MessagesFromWindow();
|
||||||
dispatch(setLast20Messages(messages));
|
dispatch(setLast20Messages(messages));
|
||||||
|
|||||||
Reference in New Issue
Block a user