Реагирует на редукционный жизненный цикл саги

Question

Файл index.js выглядит следующим образом. Я использую React Saga. Я хотел бы показать информацию о драйверах на карте без загрузки страницы.

Проблема: функция loadMap работает без поступления данных. На карте ничего нет, потому что данные пусты. он не входит в функцию loadMap при поступлении данных. как я могу решить это?

Я только начал реагировать. Если вы мне поможете, пожалуйста.

index.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import BasicMarker from '../Map/GoogleMap/maps/basicMarker';
import actions from '../../redux/deneme/actions';


const { fetchingDrivers } = actions;

class Drivers extends Component {
  static propTypes = {
    fetchingDrivers: React.PropTypes.func
  }
  constructor(props) {
    super(props);
  }
  getDrivers = () => {
    this.props.fetchingDrivers();
  };
  componentWillMount(nextProps) {
    debugger;
    this.getDrivers();
  }
  render() {
    return (
      <div style={wisgetPageStyle}>
        <Row style={rowStyle} gutter={gutter} justify="start">
          <Col md={24} sm={24} xs={24} style={colStyle}>
            <Box title={"Harita"}>
              <ContentHolder>
                <BasicMarker
                  data={this.props.drivers}
                />
              </ContentHolder>
            </Box>
          </Col>
        </Row>
      </div>
    );
  }
}

function mapStateToProps(state) {
  debugger;
  return { drivers: state.Drivers.toJS() };
}

export default connect(mapStateToProps,{ fetchingDrivers })(
  Drivers
);

Я отправляю данные в класс "BasicMarker" в этом разделе. В классе Basic Marker я хочу показать входящие данные на карте, используя google-maps-реагировать.

BasicMarker.js

..
import { GoogleApiWrapper } from 'google-maps-react';

class BasicMarkerMap extends Component {
  constructor(props) {
    super(props);
    this.loadMap = this.loadMap.bind(this);
    this.state = {
      center: { lat: 40.78306, lng: -73.971249 }, // 40.783060, -73.971249
      zoom: 13,
      posts,
      infoWindow: null,
    };
  }
  loadMap(element) {
    const { google, data } = this.props;
    if (!element || !google) return;
    const self = this;
    const Map = new google.maps.Map(element, {
      zoom: this.state.zoom,
      center: this.state.center,
      scrollwheel: false,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_RIGHT,
      },
    });
    const RichMarker = require('js-rich-marker');
    data.map(post => {
      const marker = RichMarker
        ? new RichMarker.RichMarker({
            map: Map,
            animation: google.maps.Animation.DROP,
            flat: true,
            content: Marker(post.marker),
            position: new google.maps.LatLng(post.lat, post.lng),
          })
        : new google.maps.Marker({
            position: new google.maps.LatLng(post.lat, post.lng),
            map: Map,
            flat: true,
            animation: google.maps.Animation.DROP,
            content: Marker(post.marker),
          });

      marker.addListener('click', function() {
        if (self.infowindow) {
          self.infowindow.close();
        }
      });
      return true;
    });
  }

  render() {
    const { loaded } = this.props;
    return (
      <div>
        {loaded ? (
          <BasicMapWrapper>
            <div
              className="isoGoogleMap"
              style={{ height: '650px', width: '100%' }}
              ref={this.loadMap}
            />
          </BasicMapWrapper>
        ) : (
          <span>API is Loading</span>
        )}
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: googleConfig.apiKey,
})(BasicMarkerMap);