refactor: Recoil-Zustand zoomTriggerState durch Redux zoomTriggerSlice ersetzt

- MapComponent.js nutzt jetzt Redux useSelector für zoomTrigger
- DataSheet.js verwendet dispatch(incrementZoomTrigger())
- Recoil vollständig entfernt und Store zentralisiert

CHANGELOG.md

@@ -4,6 +4,23 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+## [1.1.88] – 2025-05-22
+
+### Changed
+
+- Recoil-Atom `zoomTriggerState` vollständig durch Redux `zoomTriggerSlice` ersetzt
+- Betroffene Komponenten:
+  - `MapComponent.js` – liest `zoomTrigger` aus Redux `useSelector(...)`
+  - `DataSheet.js` – verwendet `dispatch(incrementZoomTrigger())` bei Icon-Klick
+- Redux-Store erweitert um `zoomTriggerReducer`
+
+### Removed
+
+- Entfernt: `useRecoilState(zoomTriggerState)` in `DataSheet.js`
+- Entfernt: `useRecoilValue(zoomTriggerState)` in `MapComponent.js`
+
+---
+
 ## [1.1.86] – 2025-05-21
 
 ### Changed

components/DataSheet.js

@@ -5,7 +5,7 @@ import { gisStationsStaticDistrictState } from "../redux/slices/webService/gisSt
 import { gisSystemStaticState } from "../redux/slices/webService/gisSystemStaticSlice.js";
 import { mapLayersState } from "../redux/slices/mapLayersSlice";
 import { setSelectedArea } from "../redux/slices/selectedAreaSlice";
-import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";
+
 import EditModeToggle from "./EditModeToggle";
 import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; // Import für Polyline-Visibility
 import { useSelector, useDispatch } from "react-redux";
@@ -18,6 +18,7 @@ import { selectGisStationsStaticDistrict } from "../redux/slices/webService/gisS
 
 import { selectMapLayersState, setLayerVisibility } from "../redux/slices/mapLayersSlice";
 import { setVisible } from "../redux/slices/poiLayerVisibleSlice";
+import { incrementZoomTrigger } from "../redux/slices/zoomTriggerSlice";
 
 function DataSheet() {
   const [editMode, setEditMode] = useState(false); // Zustand für editMode
@@ -31,8 +32,6 @@ function DataSheet() {
   const GisSystemStatic = useSelector(selectGisSystemStatic) || [];
   const GisStationsStatic = useSelector(selectGisStationsStatic) || []; //Area-Name/Bereiche dropdownmenu
 
-  const setZoomTrigger = useSetRecoilState(zoomTriggerState);
-
   const polylineVisible = useSelector(selectPolylineVisible);
 
   const handlePolylineCheckboxChange = (event) => {
@@ -141,7 +140,7 @@ function DataSheet() {
 
   const handleIconClick = () => {
     setSelectedArea("Station wählen");
-    setZoomTrigger((current) => current + 1);
+    dispatch(incrementZoomTrigger());
   };
 
   //---------------------------

components/mainComponent/MapComponent.js

@@ -43,7 +43,6 @@ import { selectedPoiState } from "../../redux/slices/selectedPoiSlice.js";
 import { gisSystemStaticState } from "../../redux/slices/webService/gisSystemStaticSlice.js";
 import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
 
-import { zoomTriggerState } from "../../redux/slices/zoomTriggerSlice.js";
 import { polylineLayerVisibleState } from "../../redux/slices/polylineLayerVisibleSlice.js";
 //--------------------------------------------
 import { useSelector, useDispatch } from "react-redux";
@@ -138,7 +137,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
   const [currentPoiData, setCurrentPoiData] = useState(null);
   const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
-  const zoomTrigger = useRecoilValue(zoomTriggerState);
+  const zoomTrigger = useSelector((state) => state.zoomTrigger.trigger);
   const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
   const [poiTypMap, setPoiTypMap] = useState(new Map());
   const [showPopup, setShowPopup] = useState(false);

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.87";
+export const APP_VERSION = "1.1.88";

redux/slices/zoomTriggerSlice.js

@@ -1,7 +1,22 @@
 // redux/slices/zoomTriggerSlice.js
-import { atom } from "recoil";
+import { createSlice } from "@reduxjs/toolkit";
 
-export const zoomTriggerState = atom({
+const initialState = {
-  key: "zoomTriggerState",
+  trigger: 0,
-  default: 0, // Dies kann eine einfache Zählvariable sein, die inkrementiert wird.
+};
+
+const zoomTriggerSlice = createSlice({
+  name: "zoomTrigger",
+  initialState,
+  reducers: {
+    incrementZoomTrigger: (state) => {
+      state.trigger += 1;
+    },
+    resetZoomTrigger: (state) => {
+      state.trigger = 0;
+    },
+  },
 });
+
+export const { incrementZoomTrigger, resetZoomTrigger } = zoomTriggerSlice.actions;
+export default zoomTriggerSlice.reducer;

redux/store.js

@@ -20,6 +20,7 @@ import poiReadFromDbTriggerReducer from "./slices/poiReadFromDbTriggerSlice";
 import polylineEventsDisabledReducer from "./slices/polylineEventsDisabledSlice";
 import readPoiMarkersStoreReducer from "./slices/readPoiMarkersStoreSlice";
 import selectedAreaReducer from "./slices/selectedAreaSlice";
+import zoomTriggerReducer from "./slices/zoomTriggerSlice";
 
 export const store = configureStore({
   reducer: {
@@ -43,5 +44,6 @@ export const store = configureStore({
     polylineEventsDisabled: polylineEventsDisabledReducer,
     readPoiMarkersStore: readPoiMarkersStoreReducer,
     selectedArea: selectedAreaReducer,
+    zoomTrigger: zoomTriggerReducer,
   },
 });