feat: Recoil-Atom 'poiReadFromDbTriggerAtom' vollständig durch Redux-Slice ersetzt

- Redux Slice 'poiReadFromDbTriggerSlice' eingeführt mit Trigger-Zähler
- Verwendet in index.js, AddPoiModalWindow.js, AddPOIModal.js und MapComponent.js
- Recoil entfernt und durch useSelector / dispatch(incrementTrigger()) ersetzt
- CHANGELOG.md auf 1.1.83 aktualisiert

CHANGELOG.md

@@ -4,6 +4,28 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+## [1.1.83] – 2025-05-19
+
+### Changed
+
+- `poiReadFromDbTriggerAtom` durch Redux `poiReadFromDbTriggerSlice` ersetzt
+- Alle Komponenten migriert:
+  - `index.js` – nutzt jetzt `useSelector` für Trigger
+  - `AddPoiModalWindow.js` – verwendet `dispatch(incrementTrigger())`
+  - `AddPOIModal.js` – entfernt Recoil, setzt Trigger mit Redux
+  - `MapComponent.js` – liest Trigger-Zustand via Redux statt Recoil
+
+### Removed
+
+- Entfernt: alle `useSetRecoilState(...)` und `useRecoilValue(...)` für `poiReadFromDbTriggerAtom`
+
+### Added
+
+- Neue Redux Actions:
+  - `incrementTrigger`, `resetTrigger` in `poiReadFromDbTriggerSlice.js`
+
+---
+
 ## [1.1.82] – 2025-05-18
 
 ### Changed

components/AddPOIModal.js

@@ -1,4 +1,4 @@
-// components/ShowAddStationPopup.js
+// components/AddStationPopup.js
 import React, { useState, useEffect, use } from "react";
 import ReactDOM from "react-dom";
 import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
@@ -7,6 +7,7 @@ import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSl
 import { selectGisStationsStatic } from "../redux/slices/webService/gisStationsStaticSlice";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchPoiTypes } from "../redux/slices/db/poiTypesSlice";
+import { incrementTrigger } from "../redux/slices/poiReadFromDbTriggerSlice";
 
 const ShowAddStationPopup = ({ onClose, map, latlng }) => {
   const dispatch = useDispatch();
@@ -20,7 +21,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
   const [latitude] = useState(latlng.lat.toFixed(5));
   const [longitude] = useState(latlng.lng.toFixed(5));
   const setLoadData = useSetRecoilState(readPoiMarkersStore);
-  const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
+
   const [deviceName, setDeviceName] = useState("");
   //-----------------------------------------------------
   useEffect(() => {
@@ -85,11 +86,8 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
 
     if (response.ok) {
       setTrigger((trigger) => {
-        console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
-        const newTrigger = trigger + 1;
-        console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
+        dispatch(incrementTrigger());
         onClose();
-        return newTrigger;
       });
     } else {
       console.error("Fehler beim Hinzufügen des POI");

components/mainComponent/MapComponent.js

@@ -40,7 +40,6 @@ import { updateLocation } from "../../utils/updateBereichUtil.js";
 
 import { mapIdState, userIdState } from "../../redux/slices/urlParameterSlice.js";
 import { selectedPoiState } from "../../redux/slices/selectedPoiSlice.js";
-import { poiReadFromDbTriggerAtom } from "../../redux/slices/poiReadFromDbTriggerSlice.js";
 import { gisSystemStaticState } from "../../redux/slices/webService/gisSystemStaticSlice.js";
 import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
 import { selectedAreaState } from "../../redux/slices/selectedAreaSlice.js";
@@ -143,7 +142,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
   const [poiTypMap, setPoiTypMap] = useState(new Map());
   const [showPopup, setShowPopup] = useState(false);
-  const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);
+  const poiReadTrigger = useSelector((state) => state.poiReadFromDbTrigger.trigger);
   const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
   const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
   const [map, setMap] = useState(null); // Zustand der Karteninstanz

components/pois/AddPoiModalWindow.js

@@ -3,7 +3,8 @@ import React, { useState, useEffect } from "react";
 import Select from "react-select"; // Importiere react-select
 import { useSetRecoilState, useRecoilState } from "recoil";
 import { mapLayersState } from "../../redux/slices/mapLayersSlice";
-import { poiReadFromDbTriggerAtom } from "../../redux/slices/poiReadFromDbTriggerSlice";
+import { useDispatch } from "react-redux";
+import { incrementTrigger } from "../../redux/slices/poiReadFromDbTriggerSlice";
 
 const AddPoiModalWindow = ({ onClose, map, latlng }) => {
   const [poiTypData, setpoiTypData] = useState([]);
@@ -106,7 +107,7 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
     });
 
     if (response.ok) {
-      setTrigger((trigger) => trigger + 1); // Verwenden des Triggers zur Aktualisierung
+      dispatch(incrementTrigger()); // Redux Trigger erhöhen
       onClose();
       window.location.reload();
     } else {

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.82";
+export const APP_VERSION = "1.1.84";

pages/index.js

@@ -3,13 +3,13 @@ import React, { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { readPoiMarkersStore } from "../redux/slices/readPoiMarkersStoreSlice.js";
-import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice";
+import { useSelector } 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 = useRecoilValue(poiReadFromDbTriggerAtom);
+  const poiReadTrigger = useSelector((state) => state.poiReadFromDbTrigger.trigger);
   const [locations, setLocations] = useRecoilState(readPoiMarkersStore);
   const [mParam, setMParam] = useState("");
   const [uParam, setUParam] = useState("");

redux/slices/poiReadFromDbTriggerSlice.js

@@ -1,15 +1,22 @@
 // redux/slices/poiReadFromDbTriggerSlice.js
-import { atom } from "recoil";
+import { createSlice } from "@reduxjs/toolkit";
 
-const atomKey = "poiReadFromDbTriggerAtom";
+const initialState = {
+  trigger: 0,
+};
 
-export const poiReadFromDbTriggerAtom =
-  globalThis.poiReadFromDbTriggerAtom ||
-  atom({
-    key: atomKey,
-    default: 0,
-  });
+const poiReadFromDbTriggerSlice = createSlice({
+  name: "poiReadFromDbTrigger",
+  initialState,
+  reducers: {
+    incrementTrigger: (state) => {
+      state.trigger += 1;
+    },
+    resetTrigger: (state) => {
+      state.trigger = 0;
+    },
+  },
+});
 
-if (process.env.NODE_ENV !== "production") {
-  globalThis.poiReadFromDbTriggerAtom = poiReadFromDbTriggerAtom;
-}
+export const { incrementTrigger, resetTrigger } = poiReadFromDbTriggerSlice.actions;
+export default poiReadFromDbTriggerSlice.reducer;

redux/store.js

@@ -16,6 +16,7 @@ import selectedPoiReducer from "./slices/selectedPoiSlice";
 import selectedDeviceReducer from "./slices/selectedDeviceSlice";
 import mapLayersReducer from "./slices/mapLayersSlice";
 import poiLayerVisibleReducer from "./slices/poiLayerVisibleSlice";
+import poiReadFromDbTriggerReducer from "./slices/poiReadFromDbTriggerSlice";
 
 export const store = configureStore({
   reducer: {
@@ -35,5 +36,6 @@ export const store = configureStore({
     selectedDevice: selectedDeviceReducer,
     mapLayers: mapLayersReducer,
     poiLayerVisible: poiLayerVisibleReducer,
+    poiReadFromDbTrigger: poiReadFromDbTriggerReducer,
   },
 });