Javascript 不使用react redux订阅存储区的特定部分

我正在尝试将一个mobile.js marker弹出内容连接到react组件内的redux存储-我希望每次数据更改时，marker都直接从存储中更新

每个标记表示一个站点，当您单击该站点时，它会给您一个来自存储的估计值，但当您保持弹出窗口打开时，会出现问题-它不会更新-因为它没有“连接”到存储-当react组件单击组件时，数据正在从存储加载-a回拨

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

这是电台的代码：

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;

这是桩号图层单击的回调（每个桩号都是一个图层）：

stationnclick（事件）{
//获取调用此事件处理程序的站层
const stationLayer=event.target；
//从州政府处获取该站的估算值（由站abbr提供）
const estimatesOfStation=u2;查找(
stationLayer.creatorObj.props.estimates.estimates，
[“abbr”，stationLayer.data.abbr]
);
//检查是否对该站有任何估算
if（估计的站数！==未定义）{
//旧代码：没有改变
让平台=[]；
估计站点etd地图（功能（目的地）{
destination.estimate.map（函数（估计）{
var plat=估算平台；
如果（！平台[plat]）{
平台[平台]={
方向：估计方向，
火车：[]
};
}
站台[plat].trains.push({
分钟：估计。分钟，
destId:destination.缩写，
dest:destination.destination，
颜色：估计。颜色，
hexColor:estimate.hexColor，
bikeFlag:estimate.bikeFlag==“1”
});
});
});
var stationInfo=“Station:+estimatesOfStation.name+”；
platforms.map（函数（platform，platId）{
站台.列车.分拣（（a，b）=>toInt（a.min）-toInt（b.min））；
stationInfo+=“
平台”+platId+”：“+Platform.dir；
站台.列车.forEach（功能（列车）{
让自行车支持=”；
if（火车、自行车拉力）{
自行车支架=
"";
}
stationInfo+=
“
”+
火车。分钟+
“敏——”+
火车终点站+
" (" +
自行车支架+
", " +
train.color.toLowerCase（）+
")";
});
stationInfo+=“
”；
});
//设置电台弹出窗口的新内容
setPopupContent（stationInfo）；
}
}

1）您是否可以通过公开的源代码链接到问题的最小可复制示例？根据我的经验，如果没有这个，涉及redux的问题通常很难调试。2） 您不使用的原因是什么？3） 不是为了在这里自我插入，而是我写了一张火车地图，它做的事情与你在这里尝试做的事情非常相似。也许看看这段代码可以帮你找到更好的解决方案？1-是的，现在只有代码-，明天早上我将上传一个实例。2-我可能需要更好地学习它的文档。没有什么问题。3-谢谢，我认为这会很有帮助。从目前的角度来看，我的问题太具体了：我需要的是一种只订阅商店部分内容的方式。在redux文档中找到了一个解决方案（在页面底部-链接到实现此目的的libs-我使用了redux订阅服务器）1）您是否可以链接到公开的源代码问题的最小可复制示例？根据我的经验，如果没有这个，涉及redux的问题通常很难调试。2） 您不使用的原因是什么？3） 不是为了在这里自我插入，而是我写了一张火车地图，它做的事情与你在这里尝试做的事情非常相似。也许看看这段代码可以帮你找到更好的解决方案？1-是的，现在只有代码-，明天早上我将上传一个实例。2-我可能需要更好地学习它的文档。没有什么问题。3-谢谢，我认为这会很有帮助。从目前的角度来看，我的问题太具体了：我需要的是一种只订阅商店部分内容的方式。在redux的文档中找到了一个解决方案（在页面底部-链接到实现该功能的libs-我使用了redux订阅服务器）

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