redux, redux-toolkit, react-rrdux

2024-11-01 06:30:33 +01:00
parent f2143daa51
commit 9c21cd271c
5 changed files with 193 additions and 24 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/pages/_app.js
+++ b/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 initializeDatabase = async () => {
-        try {
-          await loadWindowVariables();
-          console.log("IndexedDB initialisiert.");
-        } catch (error) {
-          console.error("Fehler bei der Initialisierung der IndexedDB:", error);
-        }
-      };
+    const loadAndStoreVariables = async () => {
+      await loadWindowVariables();
+      const variables = {}; // Hier Variablen laden und in variables speichern
+      store.dispatch(setVariables(variables));
+    };

-      initializeDatabase();
-      setInterval(() => {
-        loadWindowVariables();
-      }, 10000);
+    if (typeof window !== "undefined") {
+      loadAndStoreVariables();
    }
  }, []);

  return (
-    <div className="bg-gray-100 flex flex-col min-h-screen overflow-hidden">
-      <Header />
-      <div className="flex flex-grow w-full">
-        <Navigation className="w-1/5" />
-        <main className="flex-1 p-4">
-          <Component {...pageProps} />
-        </main>
+    <Provider store={store}>
+      <div className="bg-gray-100 flex flex-col min-h-screen overflow-hidden">
+        <Header />
+        <div className="flex flex-grow w-full">
+          <Navigation className="w-1/5" />
+          <main className="flex-1 p-4">
+            <Component {...pageProps} />
+          </main>
+        </div>
+        <Footer />
      </div>
-      <Footer />
-    </div>
+    </Provider>
  );
 }

--- a/store/store.js
+++ b/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;
--- a/store/variablesSlice.js
+++ b/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;