feat: Migration von urlParameterSlice von Recoil Atom zu Redux-Toolkit Slice

- Recoil Atom für urlParameterSlice entfernt und durch Redux-Toolkit Slice ersetzt.
- Neue Actions `setMapId` und `setUserId` hinzugefügt, um Parameter zu aktualisieren.
- Selektoren `selectMapId` und `selectUserId` erstellt, um Parameter aus dem Zustand zu lesen.
- Standardwerte für `mapId` und `userId` entfernt; stattdessen Werte aus der URL geladen.
- Fehlermeldung hinzugefügt, wenn erforderliche URL-Parameter fehlen.
- Zustand wird jetzt dynamisch beim Laden der Seite über die URL gesetzt.

components/MapComponent.js

@@ -68,6 +68,7 @@ import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleS
 //--------------------------------------------
 import { useSelector, useDispatch } from "react-redux";
 import { selectCurrentPoi, setCurrentPoi, clearCurrentPoi } from "../redux/slices/currentPoiSlice";
+import { selectMapId, selectUserId, setMapId, setUserId } from "../redux/slices/urlParameterSlice";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const dispatch = useDispatch();
@@ -84,8 +85,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
   const [isRightsLoaded, setIsRightsLoaded] = useState(false);
   const [hasRights, setHasRights] = useState(false);
-  const [mapId, setMapId] = useRecoilState(mapIdState);
+  //const [mapId, setMapId] = useRecoilState(mapIdState);
-  const [userId, setUserId] = useRecoilState(userIdState);
+  //const [userId, setUserId] = useRecoilState(userIdState);
+  const mapId = useSelector(selectMapId);
+  const userId = useSelector(selectUserId);
   const [AddPoiModalWindowState, setAddPoiModalWindowState] = useState(false);
   const [userRights, setUserRights] = useState(null);
   const setSelectedPoi = useSetRecoilState(selectedPoiState);
@@ -184,11 +187,23 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   //---------------------------------------------------------------############################################
 
+  // Zustand aktualisieren
   useEffect(() => {
     const params = new URL(window.location.href).searchParams;
-    setMapId(params.get("m"));
+
-    setUserId(params.get("u"));
+    const mapId = params.get("m");
-  }, [setMapId, setUserId]);
+    const userId = params.get("u");
+
+    if (!mapId || !userId) {
+      alert("Fehlende URL-Parameter: 'm' und 'u' sind erforderlich."); // Fehlermeldung anzeigen
+      console.error("Fehlende Parameter: 'm' und/oder 'u'");
+      return; // Abbrechen, wenn Parameter fehlen
+    }
+
+    // Werte setzen
+    dispatch(setMapId(mapId));
+    dispatch(setUserId(userId));
+  }, [dispatch]);
 
   //---------------------------------------------------------------
   // Benutzerrechte abrufen und setzen

redux/reducer.js

@@ -3,11 +3,13 @@ import { combineReducers } from "redux";
 import currentPoiReducer from "./slices/currentPoiSlice";
 import gisStationsStaticDistrictReducer from "./slices/gisStationsStaticDistrictSlice";
 import zoomTriggerReducer from "./slices/zoomTriggerSlice";
+import urlParameterReducer from "./slices/urlParameterSlice"; // Import hinzufügen
 
 const rootReducer = combineReducers({
   currentPoi: currentPoiReducer,
   gisStationsStaticDistrict: gisStationsStaticDistrictReducer,
   zoomTrigger: zoomTriggerReducer,
+  urlParameter: urlParameterReducer, // Reducer hinzufügen
 });
 
 export default rootReducer;

redux/slices/urlParameterSlice.js

@@ -1,14 +1,32 @@
 // /redux/slices/urlParameterSlice.js
-import { atom } from "recoil";
+import { createSlice } from "@reduxjs/toolkit";
 
-// Atom für die Speicherung der mapId aus der URL
+// Initialer Zustand
-export const mapIdState = atom({
+const initialState = {
-  key: "mapIdState", // Eindeutiger Schlüssel (innerhalb des gesamten Projekts)
+  mapId: "", // Standardwert z.B m=12
-  default: "10", // Standardwert
+  userId: "", // Standardwert z.B. u=484
+};
+
+// Slice erstellen
+const urlParameterSlice = createSlice({
+  name: "urlParameter",
+  initialState,
+  reducers: {
+    setMapId(state, action) {
+      state.mapId = action.payload; // Aktualisiere mapId
+    },
+    setUserId(state, action) {
+      state.userId = action.payload; // Aktualisiere userId
+    },
+  },
 });
 
-// Atom für die Speicherung der userId aus der URL
+// Aktionen exportieren
-export const userIdState = atom({
+export const { setMapId, setUserId } = urlParameterSlice.actions;
-  key: "userIdState",
+
-  default: "484",
+// Selektoren exportieren
-});
+export const selectMapId = (state) => state.urlParameter.mapId;
+export const selectUserId = (state) => state.urlParameter.userId;
+
+// Reducer exportieren
+export default urlParameterSlice.reducer;