refactor: Recoil durch Redux ersetzt und Fehler behoben

- Entfernt `useRecoilState(mapLayersState)` und durch `useSelector(selectMapLayersState)` ersetzt.
- Alle `setMapLayersVisibility` durch `dispatch(setLayerVisibility(...))` ersetzt.
- LocalStorage-Handling für `mapLayersVisibility` mit Redux umgesetzt.
- Fehler "setMapLayersVisibility is not defined" behoben, indem `dispatch` verwendet wurde.
- Sicherstellung, dass `mapLayersSlice` im Redux-Store registriert ist.

components/DataSheet.js

@@ -17,11 +17,13 @@ import { useInitGisStationsStatic } from "../components/mainComponent/hooks/webS
 import { fetchGisStationsStatic, selectGisStationsStatic } from "../redux/slices/webService/gisStationsStaticSlice";
 import { selectGisStationsStaticDistrict } from "../redux/slices/webService/gisStationsStaticDistrictSlice";
 
+import { selectMapLayersState, setLayerVisibility } from "../redux/slices/mapLayersSlice";
+
 function DataSheet() {
   const [editMode, setEditMode] = useState(false); // Zustand für editMode
   const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
   const setSelectedArea = useSetRecoilState(selectedAreaState);
-  const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState);
+  const mapLayersVisibility = useSelector(selectMapLayersState);
   const [stationListing, setStationListing] = useState([]);
   const [systemListing, setSystemListing] = useState([]);
   const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || [];
@@ -38,13 +40,8 @@ function DataSheet() {
     localStorage.setItem("polylineVisible", checked);
 
     if (checked) {
-      // Wenn Kabelstrecken aktiviert wird, TALAS automatisch auch aktivieren
-      const newMapLayersVisibility = {
-        ...mapLayersVisibility,
-        TALAS: true,
-      };
-      setMapLayersVisibility(newMapLayersVisibility);
-      localStorage.setItem("mapLayersVisibility", JSON.stringify(newMapLayersVisibility));
+      dispatch(setLayerVisibility({ layer: "TALAS", visibility: true }));
+      localStorage.setItem("mapLayersVisibility", JSON.stringify({ ...mapLayersVisibility, TALAS: true }));
     }
   };
 
@@ -61,15 +58,19 @@ function DataSheet() {
       dispatch(setPolylineVisible(storedPolylineVisible === "true"));
     }
 
+    // Layer-Sichtbarkeiten aus localStorage laden
     const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
     if (storedMapLayersVisibility) {
-      setMapLayersVisibility(JSON.parse(storedMapLayersVisibility));
+      const parsedVisibility = JSON.parse(storedMapLayersVisibility);
+      Object.keys(parsedVisibility).forEach((key) => {
+        dispatch(setLayerVisibility({ layer: key, visibility: parsedVisibility[key] }));
+      });
     }
 
     // EditMode lesen
     const storedEditMode = localStorage.getItem("editMode");
     setEditMode(storedEditMode === "true");
-  }, [setPoiVisible, setMapLayersVisibility]);
+  }, [setPoiVisible, dispatch]); // ✅ `setMapLayersVisibility` entfernt
 
   const handleAreaChange = (event) => {
     const selectedIndex = event.target.options.selectedIndex;
@@ -122,11 +123,8 @@ function DataSheet() {
     if (editMode) return;
     const { checked } = event.target;
 
-    setMapLayersVisibility((prev) => {
-      const newState = { ...prev, [key]: checked };
-      localStorage.setItem("mapLayersVisibility", JSON.stringify(newState));
-      return newState;
-    });
+    dispatch(setLayerVisibility({ layer: key, visibility: checked }));
+    localStorage.setItem("mapLayersVisibility", JSON.stringify({ ...mapLayersVisibility, [key]: checked }));
 
     setTimeout(() => {
       const event = new Event("visibilityChanged");