如何使用react + redux在leaflet v3中获取地图属性和处理事件？

import React from 'react';
import { connect } from 'react-redux';
import { Map, TileLayer } from 'react-leaflet';

// Redux actions
const updateMapProperties = (properties) => ({
  type: 'UPDATE_MAP_PROPERTIES',
  payload: properties,
});

// Redux reducer
const mapReducer = (state = {}, action) => {
  switch (action.type) {
    case 'UPDATE_MAP_PROPERTIES':
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

// React component
class MapContainer extends React.Component {
  componentDidMount() {
    // Fetch map properties from API or other data source
    const mapProperties = { center: [51.505, -0.09], zoom: 13 };
    this.props.updateMapProperties(mapProperties);
  }

  handleMapClick = (event) => {
    // Handle map click event
    console.log('Map clicked:', event.latlng);
  };

  render() {
    const { center, zoom } = this.props.mapProperties;

    return (
      <Map center={center} zoom={zoom} onClick={this.handleMapClick}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        {/* Add other map layers, markers, controls, etc. */}
      </Map>
    );
  }
}

// Redux store
const mapStateToProps = (state) => ({
  mapProperties: state.mapProperties,
});

const mapDispatchToProps = {
  updateMapProperties,
};

const ConnectedMapContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(MapContainer);

export default ConnectedMapContainer;