redux, redux-toolkit, react-rrdux

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>
   );
 }