Keplergl react duplicates Layers upon adding more datasets got from supabase

Question

I'm trying to visualize data from supabase onto KeplerGl map but KeplerGl keeps on duplicating layers upon adding new data to the map.

When I set keepExistingConfig: false it wipes all the existing layers and adds the last fetched datasets. I kindly need some help on this task. Here is my keplergl map

In AddDataToMap.js file, same as AddPoints and AddMonitoringDeviceStatus files

const ADD = () => {
  const data = fetch('from/some/endpoint');
  
  const geojson = { 
    datasets: { info: {id: 'my_data'},data: processGeojson(data) }
    options: { keepExistingConfig: true },
   ... // other configs
  }
 
  useEffect(()=>{
     
     dispatch(addDataToMap(geojson))    

     });
    return null;
  }

In map.js file

const Map = () => (

   <ErrorBoundary>
        <AutoSizer>
          {({ height, width }) => (
            <KeplerGl
              id="map"
              store={store}
              width={width}
              height={height}
              mapboxApiAccessToken={token}
              onHover={handleLayerHover}
              onClick={handleLayerClick}
            />
          )}
        </AutoSizer>
    </ErrorBoundary>
      <AddDataToMap />
      <AddPoints />
      <AddMonitoringDeviceStatus />
)

Answer 1

According to my current implementation, I was dispatching addDataToMap action in every component.

• The best implementation is here

gist

const Map = () => {
 const addData = async() => {
   const data_1 = await fetchData1();  
   const data_2 = await fetchData2();  
   
   if([data_1, data_2].includes(undefined)) return;

  const datasets = [
      {
         { info: { id: 'data_1' }, data: data_1 },
         { info: { id: 'data_2' }, data: data_2 },
       } 
    ]
   
  dispatch(addDataTopMap({ datasets, config: {} });

   }

  useEffect(() => {
 
   addData();

  },[data_2, data_1])

}