リーフレットマップからreduxアクションを呼び出す

Question

リーフレットマップを追加したreact/reduxアプリケーションがあります。リーフレット・マップは、geoJSONを介して移入されています。ユーザーがマップ機能をクリックしてreduxアクションを呼び出す方法はありますか？私は本当にユーザーがポップアップをクリックしたときにアクションを実行できるようにしたいと思います。ユーザーがクリックした機能のID番号を保存して、データを取得して店舗に入れ、その機能の詳細が記載された別のページを開くことができるようにしたいと思います。

これは私がリーフレットに持っているものです。

myLayer = L.geoJSON(features, { 
    //only points here 
    filter: function(feature, layer) { 
     return (feature.geometry.type == "Point"); 
    }, 
    //make each point a circle 
    pointToLayer: function (feature, latlng) { 
     return L.circleMarker(latlng, geojsonMarkerOptions); 
    }, 
    onEachFeature: function(feature, layer) { 
     //popup contents 
     var customPopup = `<div class='popuplink' > <-----user clicks 
      <p>${feature.properties.title}</p></div>`; 

     //popup options 
     var customOptions = 
     { 
      width: '72', //about 1 inch 
      className: 'custom' 
     }; 

     //create layer 
     layer.bindPopup(customPopup, customOptions); 

    } 


}); 
myLayer.addTo(map); 

私がクリックしたときに、私が欲しいのページに行くことをポップアップで、リンクに入れてみました。 （私は、アプリケーションで反応ルータを使用しています）。このように：

しかし、私がそれを行うと、還元型ストアINIT全体が呼び出され、すべてが失われます。誰かが私になぜこれが起こっているのか説明することができますか？私はそのリーフレットを理解し、それぞれが自分の状態を維持する。しかし、そこに私の店を失うことなく地図から行動を呼び出すことができるようにそれらの間に橋を形成する方法はありますか？

Answer 1

OK。私は今のところ回避策を見つけました。エレガントではありませんが、機能します。誰かが私にそれを聞いてほしいよりよい解決策を教えてもらえるならば。

reduxが自動的に再初期化され、すべてが失われるため、リーフレットマップ自体からページを直接呼び出すことはできません。ですから、すでにDOM上のものからreduxを呼び出さなければなりません。

私は反応ページに2つの非表示フィールドを作成しました。 1つは、取得したいデータのIDを保持する入力フィールドです。 2番目のボタンはフェッチアクション作成者を実際に呼び出すボタンです。ボタンがクリックされると、アクション作成者は入力フィールド内のid＃を見つけ、そのアクションを呼び出します。その後、アクションが実行され、データがフェッチされ、そこでルータが使用されて詳細ページに移動します。

onEachFeature: function(feature, layer) { 

    var popupId = 'info' + feature.properties.id; 

    //create a div element 
    var domElem = document.createElement('div'); 
    domElem.id = popupId; 

    //what popup will say 
    var newContent = document.createTextNode(feature.properties.title);  

    //add the text node to the newly created div. 
    domElem.appendChild(newContent); 

//create onclick event for popup 
domElem.onclick = function() { 

    //this points to input field on react container 
    var target = document.getElementById('featureId'); 

    //fill it with the id of the feature 
    target.value = feature.properties.id; 

    //now 'click' the button which calls redux 
    var btn = document.getElementById('goToDetails').click(); 
    } 


//create layer 
layer.bindPopup(domElem);