feat: Recoil-State 'selectedAreaState' durch Redux ersetzt

- Redux-Slice 'selectedAreaSlice' erstellt mit set/clear Funktionen
- DataSheet.js verwendet dispatch(setSelectedArea(...)) für Dropdown-Auswahl
- MapComponent.js liest Bereichsauswahl über useSelector aus Redux Store
- Recoil-Importe entfernt, Zustand zentralisiert

CHANGELOG.md

@@ -4,6 +4,18 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+## [1.1.86] – 2025-05-21
+
+### Changed
+
+- Recoil-State `selectedAreaState` vollständig entfernt
+- Umstellung auf Redux:
+  - `selectedAreaSlice.js` → zentrale Steuerung des Bereichs (Area)
+  - `DataSheet.js` – setzt `setSelectedArea(...)` über Redux
+  - `MapComponent.js` – liest `selectedArea` aus Redux und zentriert Karte
+
+---
+
 ## [1.1.85] – 2025-05-21
 
 ### Changed

components/DataSheet.js

@@ -4,7 +4,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { gisStationsStaticDistrictState } from "../redux/slices/webService/gisStationsStaticDistrictSlice";
 import { gisSystemStaticState } from "../redux/slices/webService/gisSystemStaticSlice.js";
 import { mapLayersState } from "../redux/slices/mapLayersSlice";
-import { selectedAreaState } from "../redux/slices/selectedAreaSlice";
+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
@@ -21,10 +21,9 @@ import { setVisible } from "../redux/slices/poiLayerVisibleSlice";
 
 function DataSheet() {
   const [editMode, setEditMode] = useState(false); // Zustand für editMode
-  const dispatch = useDispatch();
   const poiVisible = useSelector((state) => state.poiLayerVisible.visible);
   const setPoiVisible = (value) => dispatch(setVisible(value));
-  const setSelectedArea = useSetRecoilState(selectedAreaState);
+  const dispatch = useDispatch();
   const mapLayersVisibility = useSelector(selectMapLayersState);
   const [stationListing, setStationListing] = useState([]);
   const [systemListing, setSystemListing] = useState([]);
@@ -77,7 +76,7 @@ function DataSheet() {
   const handleAreaChange = (event) => {
     const selectedIndex = event.target.options.selectedIndex;
     const areaName = event.target.options[selectedIndex].text;
-    setSelectedArea(areaName);
+    dispatch(setSelectedArea(areaName));
   };
 
   useEffect(() => {

components/mainComponent/MapComponent.js

@@ -42,7 +42,7 @@ import { mapIdState, userIdState } from "../../redux/slices/urlParameterSlice.js
 import { selectedPoiState } from "../../redux/slices/selectedPoiSlice.js";
 import { gisSystemStaticState } from "../../redux/slices/webService/gisSystemStaticSlice.js";
 import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
-import { selectedAreaState } from "../../redux/slices/selectedAreaSlice.js";
+
 import { zoomTriggerState } from "../../redux/slices/zoomTriggerSlice.js";
 import { polylineLayerVisibleState } from "../../redux/slices/polylineLayerVisibleSlice.js";
 //--------------------------------------------
@@ -179,7 +179,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [lineStatusData, setLineStatusData] = useState([]);
   const [linesData, setLinesData] = useState([]);
   const mapLayersVisibility = useSelector(selectMapLayersState) || {};
-  const selectedArea = useRecoilValue(selectedAreaState);
+  const selectedArea = useSelector((state) => state.selectedArea.area);
 
   const [linePositions, setLinePositions] = useState([]);
   const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl, setLineStatusData);

config/appVersion.js

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

redux/slices/selectedAreaSlice.js

@@ -1,7 +1,22 @@
-// /redux/slides/selectedAreaSlice.js
-import { atom } from "recoil";
+// redux/slices/selectedAreaSlice.js
+import { createSlice } from "@reduxjs/toolkit";
 
-export const selectedAreaState = atom({
-  key: "selectedAreaState", // unique ID (with respect to other atoms/selectors)
-  default: null, // default value (aka initial value)
+const initialState = {
+  area: null,
+};
+
+const selectedAreaSlice = createSlice({
+  name: "selectedArea",
+  initialState,
+  reducers: {
+    setSelectedArea: (state, action) => {
+      state.area = action.payload;
+    },
+    clearSelectedArea: (state) => {
+      state.area = null;
+    },
+  },
 });
+
+export const { setSelectedArea, clearSelectedArea } = selectedAreaSlice.actions;
+export default selectedAreaSlice.reducer;

redux/store.js

@@ -19,6 +19,7 @@ import poiLayerVisibleReducer from "./slices/poiLayerVisibleSlice";
 import poiReadFromDbTriggerReducer from "./slices/poiReadFromDbTriggerSlice";
 import polylineEventsDisabledReducer from "./slices/polylineEventsDisabledSlice";
 import readPoiMarkersStoreReducer from "./slices/readPoiMarkersStoreSlice";
+import selectedAreaReducer from "./slices/selectedAreaSlice";
 
 export const store = configureStore({
   reducer: {
@@ -41,5 +42,6 @@ export const store = configureStore({
     poiReadFromDbTrigger: poiReadFromDbTriggerReducer,
     polylineEventsDisabled: polylineEventsDisabledReducer,
     readPoiMarkersStore: readPoiMarkersStoreReducer,
+    selectedArea: selectedAreaReducer,
   },
 });