redux, redux-toolkit, react-rrdux

package-lock.json

@@ -12,6 +12,7 @@
         "@iconify-icons/ri": "^1.2.10",
         "@iconify/json": "^2.2.253",
         "@iconify/react": "^5.0.2",
+        "@reduxjs/toolkit": "^2.3.0",
         "autoprefixer": "^10.4.20",
         "bootstrap-icons": "^1.11.3",
         "chart.js": "^4.4.5",
@@ -20,7 +21,10 @@
         "react": "^18",
         "react-dom": "^18",
         "react-modal": "^3.16.1",
-        "react-spinners": "^0.14.1"
+        "react-redux": "^9.1.2",
+        "react-spinners": "^0.14.1",
+        "redux": "^5.0.1",
+        "redux-persist": "^6.0.0"
       },
       "devDependencies": {
         "postcss": "^8.4.47",
@@ -336,6 +340,29 @@
         "node": ">=14"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.3.0.tgz",
+      "integrity": "sha512-WC7Yd6cNGfHx8zf+iu+Q1UPTfEcXhQ+ATi7CV1hlrSAaQBdlPzg7Ww/wJHNQem7qG9rxmWoFCDCPubSvFObGzA==",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -350,6 +377,11 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
@@ -860,6 +892,15 @@
       "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.0.tgz",
       "integrity": "sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw=="
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1493,6 +1534,28 @@
         "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
       }
     },
+    "node_modules/react-redux": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
+      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-spinners": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.14.1.tgz",
@@ -1523,6 +1586,32 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
+    "node_modules/redux-persist": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
+      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
+      "peerDependencies": {
+        "redux": ">4.0.0"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -1907,6 +1996,14 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "@iconify-icons/ri": "^1.2.10",
     "@iconify/json": "^2.2.253",
     "@iconify/react": "^5.0.2",
+    "@reduxjs/toolkit": "^2.3.0",
     "autoprefixer": "^10.4.20",
     "bootstrap-icons": "^1.11.3",
     "chart.js": "^4.4.5",
@@ -23,7 +24,10 @@
     "react": "^18",
     "react-dom": "^18",
     "react-modal": "^3.16.1",
-    "react-spinners": "^0.14.1"
+    "react-redux": "^9.1.2",
+    "react-spinners": "^0.14.1",
+    "redux": "^5.0.1",
+    "redux-persist": "^6.0.0"
   },
   "devDependencies": {
     "postcss": "^8.4.47",

pages/_app.js

@@ -5,37 +5,36 @@ import Header from "../components/Header";
 import Navigation from "../components/Navigation";
 import Footer from "../components/Footer";
 import "../styles/globals.css";
+import { Provider } from "react-redux";
+import { setVariables } from "../store/variablesSlice";
+import store from "../store/store";
 
 function MyApp({ Component, pageProps }) {
   useEffect(() => {
-    if (typeof window !== "undefined") {
+    const loadAndStoreVariables = async () => {
-      const initializeDatabase = async () => {
+      await loadWindowVariables();
-        try {
+      const variables = {}; // Hier Variablen laden und in variables speichern
-          await loadWindowVariables();
+      store.dispatch(setVariables(variables));
-          console.log("IndexedDB initialisiert.");
+    };
-        } catch (error) {
-          console.error("Fehler bei der Initialisierung der IndexedDB:", error);
-        }
-      };
 
-      initializeDatabase();
+    if (typeof window !== "undefined") {
-      setInterval(() => {
+      loadAndStoreVariables();
-        loadWindowVariables();
-      }, 10000);
     }
   }, []);
 
   return (
-    <div className="bg-gray-100 flex flex-col min-h-screen overflow-hidden">
+    <Provider store={store}>
-      <Header />
+      <div className="bg-gray-100 flex flex-col min-h-screen overflow-hidden">
-      <div className="flex flex-grow w-full">
+        <Header />
-        <Navigation className="w-1/5" />
+        <div className="flex flex-grow w-full">
-        <main className="flex-1 p-4">
+          <Navigation className="w-1/5" />
-          <Component {...pageProps} />
+          <main className="flex-1 p-4">
-        </main>
+            <Component {...pageProps} />
+          </main>
+        </div>
+        <Footer />
       </div>
-      <Footer />
+    </Provider>
-    </div>
   );
 }
 

store/store.js

@@ -0,0 +1,11 @@
+// store/store.js
+import { configureStore } from "@reduxjs/toolkit";
+import variablesReducer from "./variablesSlice";
+
+const store = configureStore({
+  reducer: {
+    variables: variablesReducer,
+  },
+});
+
+export default store;

store/variablesSlice.js

@@ -0,0 +1,58 @@
+// store/variablesSlice.js
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  last20Messages: null,
+  deviceName: null,
+  mac1: null,
+  mac2: null,
+  ip: null,
+  subnet: null,
+  gateway: null,
+  datetime: null,
+  de: null,
+  counter: null,
+  flutter: null,
+  kueOnline: [],
+  kueID: [],
+  kueAlarm1: [],
+  kueAlarm2: [],
+  kueRes: [],
+  kueCableBreak: [],
+  kueGroundFault: [],
+  kueLimit1: null,
+  kueLimit2Low: null,
+  kueDelay1: null,
+  kueLoopInterval: null,
+  kueVersion: null,
+  tdrAtten: null,
+  tdrPulse: null,
+  tdrSpeed: null,
+  tdrAmp: null,
+  tdrTrigger: null,
+  tdrLocation: null,
+  tdrActive: null,
+  kueOverflow: null,
+  kueResidence: null,
+  tdrLast: null,
+  appVersion: null,
+};
+
+const variablesSlice = createSlice({
+  name: "variables",
+  initialState,
+  reducers: {
+    setVariable(state, action) {
+      const { key, value } = action.payload;
+      state[key] = value;
+    },
+    setVariables(state, action) {
+      Object.entries(action.payload).forEach(([key, value]) => {
+        state[key] = value;
+      });
+    },
+  },
+});
+
+export const { setVariable, setVariables } = variablesSlice.actions;
+export default variablesSlice.reducer;