React.js, wo Google Maps API-Abfragen setzen?

Question

Ich baue eine Google Maps App mit React.js.

Mein Instinkt ist es, separate Datei mit einer ES6-Klasse zu erstellen, um Suchanfragen zu behandeln - innerhalb der Klasse wird es eine Funktion geben, die das Suchergebnis zurückgibt. Ich beabsichtige, diese Funktion innerhalb einer React-Komponente aufzurufen.

Siehe die folgende Komponente als Referenz.

Sollte ich den Code innerhalb der Methoden findRoutes() und drawBoxes() verschieben, um Dateien zu trennen? Dies ist meine erste Reactive-App - ich möchte lernen, wie man den Code am besten organisiert. Irgendwelche Tipps werden sehr geschätzt.

var MapControl = React.createClass({ 
      getInitialState: function(){ 
       return { 
        originId: '', 
        destinationId: '', 
        radius: 1, 
        search: '', 
        map: {}, 
        travelMode: google.maps.TravelMode.DRIVING 
       } 
      }, 
      handleFormSubmit: function(input){ 
       // Form Input 
       // Call findRoutes() once setState is complete. 
       this.setState({ 
        originId: input.originId, 
        destinationId: input.destinationId, 
        radius: input.radius, 
        search: input.search 
       }, this.findRoutes); 

      }, 
      handleMapRender: function(map){ 
       // Intialized Google Map 
       this.setState({map: map}); 
       directionsService = new google.maps.DirectionsService(); 
       directionsDisplay = new google.maps.DirectionsRenderer(); 
       routeBoxer = new RouteBoxer(); 
       directionsDisplay.setMap(map); 
       placesService = new google.maps.places.PlacesService(map); 
      }, 
      findRoutes: function(){ 
       var me = this; 
       if (!this.state.originId || !this.state.destinationId) { 
        alert("findRoutes!"); 
        return; 
       } 
       directionsService.route({ 
        origin: {'placeId': this.state.originId}, 
        destination: {'placeId': this.state.destinationId}, 
        travelMode: this.state.travelMode 
       }, _.bind(function(response, status){ 
        if (status === google.maps.DirectionsStatus.OK) { 
         // me.response = response; 
         directionsDisplay.setDirections(response); 
         var path = response.routes[0].overview_path; 
         this.setState({ 
          routes: response, 
          boxes: routeBoxer.box(path, this.state.radius) 
         },this.drawBoxes); 
        } else { 
         window.alert('Directions config failed due to ' + status); 
        } 
       }, this)); 
      }, 
      drawBoxes: function(){ 
       var boxpolys = new Array(this.state.boxes.length); 
       for (var i = 0; i < this.state.boxes.length; i++) { 
        boxpolys[i] = new google.maps.Rectangle({ 
         bounds: this.state.boxes[i], 
         fillOpacity: 0, 
         strokeOpacity: 1.0, 
         strokeColor: '#000000', 
         strokeWeight: 1, 
         map: this.state.map 
        }); 
       } 
      }, 
      render: function() { 
       return (
        <div className="MapControl"> 
         <h1>Search</h1> 
         <MapForm 
          onFormSubmit={this.handleFormSubmit} 
          map={this.state.map}/> 
         <GMap 
          setMapState={this.handleMapRender} 
          originId= {this.state.originId} 
          destinationId= {this.state.destinationId} 
          radius= {this.state.radius} 
          search= {this.state.search}/> 
        </div> 
       ); 
      } 
     }); 

Answer 1

Ihr Instinkt ist richtig, es ist gute Praxis im Allgemeinen Ihrer Ansicht Code so gering wie möglich zu halten, und etwas zu bewegen, die nicht explizit zu machen Ihre Meinung nach in einer anderen Klasse in Beziehung steht.

React.js selbst nicht eigenwillig, wie Sie den Rest Ihrer Anwendungsanforderungen umgehen, aber ein paar Bibliotheken haben als die führenden Lösungen für den Umgang mit Ereignissen, Routing, Dienstleistungen, Daten entstanden usw.

Sie sollten Sehen Sie sich das Flux-Muster an, um einen Überblick darüber zu erhalten, wie Sie den Rest Ihrer Anwendungen für React-Apps verwalten können. https://facebook.github.io/flux/docs/overview.html

Ich habe von Flux mit Redux kürzlich http://redux.js.org/ bewegt auf

Wenn Sie nur schnell etwas und läuft wollen (die als die führende ‚Fluxish‘ State Management lib entstanden ist) erhalten und aren Wenn ich noch nicht versuche, in all das einzutauchen, würde ich die Methode findRoutes auf eine externe service verschieben, die Sie importieren ... drawBoxes scheint in Ordnung zu bleiben, da sie direkt mit dem Rendern von Kartenelementen in der Ansicht

zusammenhängt