使用React-Google-Maps和Redux异步显示标记

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
import { fetchMarkers } from './actions/markersActions';

export const fetchMarkers = () => {
  return async (dispatch) => {
    try {
      // 异步获取标记数据的逻辑
      const markers = await fetch('https://api.example.com/markers');
      const data = await markers.json();

      // 将获取到的标记数据传递给Redux store
      dispatch({ type: 'FETCH_MARKERS_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_MARKERS_ERROR', payload: error.message });
    }
  };
};

const initialState = {
  markers: [],
  loading: false,
  error: null,
};

const markersReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_MARKERS_SUCCESS':
      return {
        ...state,
        markers: action.payload,
        loading: false,
        error: null,
      };
    case 'FETCH_MARKERS_ERROR':
      return {
        ...state,
        markers: [],
        loading: false,
        error: action.payload,
      };
    default:
      return state;
  }
};

export default markersReducer;

const MapContainer = () => {
  const dispatch = useDispatch();
  const markers = useSelector((state) => state.markers.markers);
  const loading = useSelector((state) => state.markers.loading);
  const error = useSelector((state) => state.markers.error);

  useEffect(() => {
    dispatch(fetchMarkers());
  }, [dispatch]);

  const GoogleMapComponent = withGoogleMap(() => (
    <GoogleMap defaultCenter={{ lat: 0, lng: 0 }} defaultZoom={10}>
      {markers.map((marker) => (
        <Marker key={marker.id} position={{ lat: marker.lat, lng: marker.lng }} />
      ))}
    </GoogleMap>
  ));

  return (
    <div>
      {loading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error: {error}</p>
      ) : (
        <GoogleMapComponent
          containerElement={<div style={{ height: '400px', width: '100%' }} />}
          mapElement={<div style={{ height: '100%' }} />}
        />
      )}
    </div>
  );
};