订阅商店的特定部分而不使用react-redux

Question

我正在尝试将leaflet.js标记弹出内容连接到react组件内的redux存储-我希望标记每次数据更改时都可以直接从存储中更新。

每个标记代表一个测站，当您单击该测站时，它会为您提供来自商店的估算值，但是问题在打开弹出窗口时出现-不会更新-因为它不是'已连接到商店-当用户单击组件时，react组件将从商店中加载数据-回调。

也许我的整个工作方法都不正确，欢迎提出任何建议！

这是 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;

这是我从商店加载车站静态数据的地方，在地图上创建了stationsLayers：

  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);
    }
  }