feat: Recoil-Atom 'readPoiMarkersStore' durch Redux ersetzt

- Slice 'readPoiMarkersStoreSlice' hinzugefügt mit set/clear Funktionen
- index.js vollständig auf Redux umgestellt: useSelector + dispatch(setPoiMarkers)
- AddPOIModal.js verwendet Redux (Dispatch vorbereitet), Recoil entfernt
- store.js um readPoiMarkersStoreReducer ergänzt
- CHANGELOG.md auf 1.1.85 aktualisiert

CHANGELOG.md

@@ -4,6 +4,25 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+## [1.1.85] – 2025-05-21
+
+### Changed
+
+- Recoil-Atom `readPoiMarkersStore` vollständig durch Redux-Slice ersetzt
+- Betroffene Komponenten:
+  - `index.js` – verwendet `useSelector` und `dispatch(setPoiMarkers(...))` statt `useRecoilState`
+  - `AddPOIModal.js` – entfernt Recoil, nutzt jetzt Redux `setPoiMarkers(...)` (optional)
+- Redux-Store aktualisiert:
+  - Slice `readPoiMarkersStoreSlice` eingebunden
+
+### Added
+
+- Redux-Slice `readPoiMarkersStoreSlice.js` mit Actions:
+  - `setPoiMarkers(data)`
+  - `clearPoiMarkers()`
+
+---
+
 ## [1.1.84] – 2025-05-20
 
 ### Changed

components/AddPOIModal.js

@@ -1,9 +1,7 @@
 // components/AddStationPopup.js
 import React, { useState, useEffect, use } from "react";
 import ReactDOM from "react-dom";
-import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
+import { setPoiMarkers } from "../redux/slices/readPoiMarkersStoreSlice";
-import { readPoiMarkersStore } from "../redux/slices/readPoiMarkersStoreSlice.js";
-import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice.js";
 import { selectGisStationsStatic } from "../redux/slices/webService/gisStationsStaticSlice";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchPoiTypes } from "../redux/slices/db/poiTypesSlice";
@@ -20,7 +18,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
 
   const [latitude] = useState(latlng.lat.toFixed(5));
   const [longitude] = useState(latlng.lng.toFixed(5));
-  const setLoadData = useSetRecoilState(readPoiMarkersStore);
+  dispatch(setPoiMarkers(data));
 
   const [deviceName, setDeviceName] = useState("");
   //-----------------------------------------------------
@@ -85,10 +83,9 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
     });
 
     if (response.ok) {
-      setTrigger((trigger) => {
+      dispatch(incrementTrigger());
-        dispatch(incrementTrigger());
+      onClose();
-        onClose();
+      window.location.reload();
-      });
     } else {
       console.error("Fehler beim Hinzufügen des POI");
     }

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.85";
+export const APP_VERSION = "1.1.86";

pages/index.js

@@ -2,15 +2,16 @@
 import React, { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import { useRecoilState, useRecoilValue } from "recoil";
-import { readPoiMarkersStore } from "../redux/slices/readPoiMarkersStoreSlice.js";
+import { setPoiMarkers } from "../redux/slices/readPoiMarkersStoreSlice.js";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 
 const MapComponentWithNoSSR = dynamic(() => import("../components/mainComponent/MapComponent"), { ssr: false });
 const TestScriptWithNoSSR = dynamic(() => import("../components/TestScript"), { ssr: false });
 
 export default function Home() {
   const poiReadTrigger = useSelector((state) => state.poiReadFromDbTrigger.trigger);
-  const [locations, setLocations] = useRecoilState(readPoiMarkersStore);
+  const dispatch = useDispatch();
+  const locations = useSelector((state) => state.readPoiMarkersStore.poiMarkers);
   const [mParam, setMParam] = useState("");
   const [uParam, setUParam] = useState("");
 
@@ -22,7 +23,7 @@ export default function Home() {
         throw new Error("Fehler beim Laden der Standortdaten");
       }
       const data = await response.json();
-      setLocations(data);
+      dispatch(setPoiMarkers(data));
     } catch (error) {
       console.error(error.message);
     }

redux/slices/readPoiMarkersStoreSlice.js

@@ -1,17 +1,22 @@
-//redux/slices/readPoiMarkersStoreSlice.js
+// redux/slices/readPoiMarkersStoreSlice.js
-import { atom } from "recoil";
+import { createSlice } from "@reduxjs/toolkit";
 
-const storeKey = "readPoiMarkersStore";
+const initialState = {
+  poiMarkers: [],
+};
 
-// Verhindert doppelte Registrierung bei HMR
+const readPoiMarkersStoreSlice = createSlice({
-export const readPoiMarkersStore =
+  name: "readPoiMarkersStore",
-  globalThis.readPoiMarkersStore ||
+  initialState,
-  atom({
+  reducers: {
-    key: storeKey,
+    setPoiMarkers: (state, action) => {
-    default: [],
+      state.poiMarkers = action.payload;
-  });
+    },
+    clearPoiMarkers: (state) => {
+      state.poiMarkers = [];
+    },
+  },
+});
 
-// Speichert das Atom im globalen Namespace (nur in Dev)
+export const { setPoiMarkers, clearPoiMarkers } = readPoiMarkersStoreSlice.actions;
-if (process.env.NODE_ENV !== "production") {
+export default readPoiMarkersStoreSlice.reducer;
-  globalThis.readPoiMarkersStore = readPoiMarkersStore;
-}

redux/store.js

@@ -18,6 +18,7 @@ import mapLayersReducer from "./slices/mapLayersSlice";
 import poiLayerVisibleReducer from "./slices/poiLayerVisibleSlice";
 import poiReadFromDbTriggerReducer from "./slices/poiReadFromDbTriggerSlice";
 import polylineEventsDisabledReducer from "./slices/polylineEventsDisabledSlice";
+import readPoiMarkersStoreReducer from "./slices/readPoiMarkersStoreSlice";
 
 export const store = configureStore({
   reducer: {
@@ -39,5 +40,6 @@ export const store = configureStore({
     poiLayerVisible: poiLayerVisibleReducer,
     poiReadFromDbTrigger: poiReadFromDbTriggerReducer,
     polylineEventsDisabled: polylineEventsDisabledReducer,
+    readPoiMarkersStore: readPoiMarkersStoreReducer,
   },
 });