refactor(poiTypes): fetch-Logik aus Slice entfernt, fetchPoiTypThunk korrekt eingebunden

- fetchPoiTypes aus poiTypesSlice entfernt
- fetchPoiTypThunk.js + Service verwendet
- dispatch-Aufrufe in Komponenten angepasst
- Fehler "is not a function" beseitigt
- Version auf 1.1.180 erhöht
This commit is contained in:
ISA
2025-05-26 14:54:39 +02:00
parent b93d474859
commit 5dea7f3e5d
5 changed files with 46 additions and 26 deletions

View File

@@ -4,6 +4,37 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
--- ---
[1.1.180] 2025-05-26
♻️ Refactor
poiTypesSlice.js wurde bereinigt:
Alte createAsyncThunk-Definition entfernt (direkter fetch im Slice)
Stattdessen Verwendung des ausgelagerten Thunks fetchPoiTypThunk aus fetchPoiTypThunk.js
Einheitliche Architektur umgesetzt:
Service → Thunk → Slice
Keine Logik mehr im Slice selbst
Verwendete Komponenten (MapComponent, AddPOIModal) rufen jetzt korrekt dispatch(fetchPoiTypThunk()) auf
🐞 Fixed
Fehler fetchPoiTypes is not a function behoben durch Entfernen des alten Imports aus poiTypesSlice
Richtiger Import fetchPoiTypThunk nun überall verwendet
🧠 Architektur
Redux-Slice enthält nur noch Zustand & Status keine Abfragen mehr
fetchPoiTypService.js stellt fetch()-Logik bereit, Thunk übernimmt Fehlerbehandlung
🔧 Version
📦 Version erhöht auf 1.1.180
---
[1.1.177] 2025-05-26 [1.1.177] 2025-05-26
✨ UI-Verbesserung ✨ UI-Verbesserung
POI-Tooltip auf der Karte wird jetzt bei Mouseover angezeigt (nicht mehr per Klick). POI-Tooltip auf der Karte wird jetzt bei Mouseover angezeigt (nicht mehr per Klick).

View File

@@ -42,7 +42,6 @@ import { useSelector, useDispatch } from "react-redux";
import { setSelectedPoi } from "../../redux/slices/database/pois/selectedPoiSlice.js"; import { setSelectedPoi } from "../../redux/slices/database/pois/selectedPoiSlice.js";
import { setDisabled } from "../../redux/slices/database/polylines/polylineEventsDisabledSlice.js"; import { setDisabled } from "../../redux/slices/database/polylines/polylineEventsDisabledSlice.js";
import { setMapId, setUserId } from "../../redux/slices/urlParameterSlice"; import { setMapId, setUserId } from "../../redux/slices/urlParameterSlice";
import { fetchPoiTypes } from "../../redux/slices/database/pois/poiTypesSlice.js";
import { selectMapLayersState } from "../../redux/slices/mapLayersSlice"; import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
import { setCurrentPoi } from "../../redux/slices/database/pois/currentPoiSlice.js"; import { setCurrentPoi } from "../../redux/slices/database/pois/currentPoiSlice.js";
import { selectGisLines } from "../../redux/slices/database/polylines/gisLinesSlice"; import { selectGisLines } from "../../redux/slices/database/polylines/gisLinesSlice";
@@ -809,7 +808,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//---------------------------------------------------- //----------------------------------------------------
useEffect(() => { useEffect(() => {
if (poiTypStatus === "idle") { if (poiTypStatus === "idle") {
dispatch(fetchPoiTypes()); dispatch(fetchPoiTypThunk());
} }
}, [poiTypStatus, dispatch]); }, [poiTypStatus, dispatch]);

View File

@@ -2,7 +2,7 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice"; import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice";
import { fetchPoiTypes } from "../../redux/slices/database/pois/poiTypesSlice"; import { fetchPoiTypThunk } from "../../redux/thunks/database/pois/fetchPoiTypThunk";
import { incrementTrigger } from "../../redux/slices/database/pois/poiReadFromDbTriggerSlice"; import { incrementTrigger } from "../../redux/slices/database/pois/poiReadFromDbTriggerSlice";
import { addPoiThunk } from "../../redux/thunks/database/pois/addPoiThunk"; import { addPoiThunk } from "../../redux/thunks/database/pois/addPoiThunk";
import { resetAddPoiStatus } from "../../redux/slices/database/pois/addPoiSlice"; import { resetAddPoiStatus } from "../../redux/slices/database/pois/addPoiSlice";
@@ -38,7 +38,7 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
}, [locationDeviceData]); }, [locationDeviceData]);
useEffect(() => { useEffect(() => {
dispatch(fetchPoiTypes()); dispatch(fetchPoiTypThunk());
}, [dispatch]); }, [dispatch]);
const handleSubmit = async (event) => { const handleSubmit = async (event) => {

View File

@@ -1,2 +1,2 @@
// /config/appVersion // /config/appVersion
export const APP_VERSION = "1.1.180"; export const APP_VERSION = "1.1.181";

View File

@@ -1,37 +1,27 @@
// /redux/slices/database/pois/poiTypesSlice.js // /redux/slices/database/pois/poiTypesSlice.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; import { createSlice } from "@reduxjs/toolkit";
import { fetchPoiTypThunk } from "../../../thunks/database/pois/fetchPoiTypThunk";
// API-Abruf für POI-Typen
export const fetchPoiTypes = createAsyncThunk("poiTypes/fetchPoiTypes", async () => {
let API_BASE_URL = "";
if (typeof window !== "undefined") {
// Browser
API_BASE_URL = `${window.location.protocol}//${window.location.hostname}:3000`;
} else {
// Server (z.B. SSR)
API_BASE_URL = "http://localhost:3000"; // oder env-Fallback z.B. process.env.API_BASE_URL
}
const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/poiTyp/readPoiTyp`);
return await response.json();
});
const poiTypesSlice = createSlice({ const poiTypesSlice = createSlice({
name: "poiTypes", name: "poiTypes",
initialState: { data: [], status: "idle" }, initialState: {
data: [],
status: "idle",
error: null,
},
reducers: {}, reducers: {},
extraReducers: (builder) => { extraReducers: (builder) => {
builder builder
.addCase(fetchPoiTypes.pending, (state) => { .addCase(fetchPoiTypThunk.pending, (state) => {
state.status = "loading"; state.status = "loading";
}) })
.addCase(fetchPoiTypes.fulfilled, (state, action) => { .addCase(fetchPoiTypThunk.fulfilled, (state, action) => {
state.data = action.payload; state.data = action.payload;
state.status = "succeeded"; state.status = "succeeded";
}) })
.addCase(fetchPoiTypes.rejected, (state) => { .addCase(fetchPoiTypThunk.rejected, (state, action) => {
state.status = "failed"; state.status = "failed";
state.error = action.payload || "Unbekannter Fehler";
}); });
}, },
}); });