Оформление подписки на определенную часть магазина без реагирования

Question

Я пытаюсь подключить всплывающее содержимое маркера leaflet.js к хранилищу избыточности внутри реактивного компонента - я хочу, чтобы маркер обновлялся непосредственно из хранилища каждый раз, когда изменяются данные.

Каждый маркер представляетстанции, и когда вы нажимаете на станцию, она дает вам оценку из магазина, но проблема возникает, когда вы оставляете всплывающее окно открытым - оно не обновляет - потому что оно не «подключено» к магазину -данные загружаются компонентом реагирования из магазина, когда они щелкают по компоненту - обратный вызов.

Возможно, вся моя методология работы неверна, любые предложения приветствуются!

это Station код:

import L from "leaflet";
import { Component } from "react";
class Station extends L.Marker {
  constructor(stationData, clickCallback, creatorObj) {
    super(new L.LatLng(stationData.gtfs_latitude, stationData.gtfs_longitude), {
      icon: L.divIcon({
        className: "station-icon",
        iconSize: [9, 9]
      })
    });
    this.popup = L.popup().setContent(
      "Station: <b>" + stationData.name + "</b>"
    );
    this.bindPopup(this.popup);
    this.data = stationData;
    if (creatorObj instanceof Component) {
      this.creatorObj = creatorObj;
    }
    if (clickCallback instanceof Function) {
      this.on("click", clickCallback);
    }
  }
}
export default Station;

здесь я загружаю статические данные станций из магазина, создавая станции Layers на карте:

  loadStations() {
    const { stations, dispatch } = this.props;

    //Creating a new list of station layers to send to the store
    let stationsLayers = [];

    //Creating a ref for the current object to access state in functions of the station layer
    const trainMapObj = this;
    //Creating a ref for station click event handler
    const stationOnClickRef = this.stationOnClick;
    stations.items.map(function(station) {
      //Creating a new station layer object and passing it the station data, a function for onclick event callback and a ref
      //to the current object to access current app state (can't connect because its not a component)
      const stationLayer = new Station(station, stationOnClickRef, trainMapObj);
      stationsLayers.push(stationLayer);
    });
    //Dispatching the layer list created to the store for the map update
    dispatch(addMapLayers(stationsLayers));

    //Letting the state know that the station load already has been done
    this.state.stationsReady = true;
  }

это обратный вызов для клика уровня станции (каждая станция является слоем):

stationOnClick(event) {
    //Getting the station layer that called this event handler
    const stationLayer = event.target;

    //Getting the estimates from the state for this station (by station abbr)
    const estimatesOfStation = _.find(
      stationLayer.creatorObj.props.estimates.estimates,
      ["abbr", stationLayer.data.abbr]
    );
    //Checking if there is any estimates for the station
    if (estimatesOfStation !== undefined) {
      //OLD CODE: DIDN'T CHANGE
      let platforms = [];
      estimatesOfStation.etd.map(function(destination) {
        destination.estimate.map(function(estimate) {
          var plat = estimate.platform;
          if (!platforms[plat]) {
            platforms[plat] = {
              dir: estimate.direction,
              trains: []
            };
          }

          platforms[plat].trains.push({
            mins: estimate.minutes,
            destId: destination.abbreviation,
            dest: destination.destination,
            color: estimate.color,
            hexColor: estimate.hexcolor,
            bikeFlag: estimate.bikeflag == "1"
          });
        });
      });
      var stationInfo = "Station: <b>" + estimatesOfStation.name + "</b>";
      platforms.map(function(platform, platId) {
        platform.trains.sort((a, b) => toInt(a.mins) - toInt(b.mins));
        stationInfo += "<br>Platform " + platId + ": " + platform.dir;
        platform.trains.forEach(function(train) {
          let bikeSupport = "";
          if (train.bikeFlag) {
            bikeSupport =
              "<img style='height:15px; vertical-align:center' src='" +
              bike +
              "' />";
          }
          stationInfo +=
            "<br> <img class='bart-bullet' style='background:" +
            train.hexColor +
            "'/>" +
            train.mins +
            " min -- " +
            train.dest +
            " (" +
            bikeSupport +
            ", " +
            train.color.toLowerCase() +
            ")";
        });
        stationInfo += "<br>";
      });

      //Set the new content of the station popup
      stationLayer.setPopupContent(stationInfo);
    }
  }