2016-10-10 2 views
1

Ich benutze Meteor 1.4/React, um eine mittelgroße App zu bauen. Ich versuche also, die 'Best Practice' für das Datenhandling zwischen Meteor 1.4/React zu finden, die ich beim Erstellen meiner App befolgen soll.Meteor 1.4 - React Daten laden Techniken Best Practice

Derzeit verwende ich createContainer, um Daten zwischen Meteor und React-Komponenten zu behandeln, wie im folgenden Beispiel gezeigt.

Nachdem ich das gesagt habe, habe ich in vielen Artikeln/Forumsbeiträgen über die Verwendung von Meteor-Paketen/Features wie React Komposer, TrackerReact und React Document Container gelesen.

Also ich bin mir nicht sicher, welche von ihnen ist am besten für ein mittelgroßes Projekt zu folgen, das mit der Zeit größer wird. Also habe ich mich gefragt, ob jemand mit ähnlicher Erfahrung/versucht diese Pakete mit mir ihre Erfahrung teilen kann?

Vielen Dank im Voraus für Ihre Hilfe und Zeit

import React, { Component } from 'react'; 
    import { createContainer } from 'meteor/react-meteor-data'; 

    export default class DDOrganization extends Component { 

     getOrganizations(){ 
     let org = this.props.org; 
     return Organizations.find({'name': {'$regex': org}}); 
     } 

     renderOrganizations(){ 
     return this.getOrganizations().bind(this).map((org) => { 
      return (
      <li key={org._id}><a href="#" data-id={org._id} onClick={this.props.setOrgState}>{org.name}</a></li> 
     ) 
     }); 
     } 

     render(){ 
      let {organizations} = this.props; 
      return (
       <ul className="select-organization-list"> 
        {this.renderOrganizations().bind(this)} 
       </ul> 
     ) 
     } 

    }; 


    export default createContainer(() => { 

     let organizations = {}; 
     let {org} = this.props; 
     let orgSub = Meteor.subscribe("OrgSubscription", org); 

     if(orgSub.ready()){ 
      organizations = Organizations.find({'name': {'$regex': org}}).fetch(); 
     } 

     return { 
      organizations: organizations 
     } 

    }, DDOrganization); 
+1

Wenn ich Sie wäre, würde ich 'createContainer' vermeiden. Es gibt ein großes [Problem in der Implementierung] (https://github.com/meteor/react-packages/blob/devel/packages/react-meteor-data/ReactMeteorData.jsx#L102), das bewirkt, dass alle umschlossenen Subskriptionen vorhanden sind neu ausgewertet, wenn Ihre Berechnung durch eine reaktive Datenquelle ungültig gemacht wird. Das ist falsch, denn wenn sich Ihre Abonnementparameter nicht ändern, sollten die Daten aus diesem Abonnement intakt bleiben. –

+0

Vielen Dank für Ihre Hilfe. Haben Sie etwas dagegen, mir zu sagen, was Sie als Alternative zu createContainer für ein mittelgroßes Meteor 1.4-Projekt empfehlen würden? Nachdem ich das gesagt habe, tut es mir leid, dass ich das hier nicht klar verstanden habe. Würden Sie bitte etwas ausdenken? Basierend auf dem, was ich bisher verstanden habe, sagst du, dass es alle Abonnements im Container neu bewertet, sogar diejenigen, die ihre Daten nicht auf dem Server geändert haben, habe ich das richtig verstanden? Danke – MChan

+0

Kurz gesagt, ich schlage vor, 'reaktiv-komposer' zu verwenden. Ich werde später etwas mehr schreiben. –

Antwort

2

Ich tue Dinge, die gleiche Art und Weise, die Sie gerade sie für ein ziemlich großes Projekt in Produktion und es scheint, tun ziemlich gut zu funktionieren. Ich glaube, es ist die empfohlene Methode von MDG.

+0

Vielen Dank, dass Sie Ihre Erfahrungen geteilt haben. Könnten Sie mitteilen, wie Sie den Status (Statusverwaltung) in Ihren React-Komponenten unter Meteor 1.4 handhaben? Danke – MChan

+1

Sicher, es hat so lange gedauert. Ich benutze createContainer neben dem SubsManager-Paket. Beispiel: 'Exportstandard CustomContainerData = create (() => { subsManager1.subscribe ('sub1'); subsManager2.subscribe ('sub2'); ... return { Laden: (subsManager1. ready() && subsManager2.ready() && ...), }; }, ReactClassName); ' Der Konstruktor dann keine zusätzlichen staatlichen Elemente wie handhaben könnte: ' Konstruktor (Requisiten) { Super (Requisiten) ; this.state = { statea: 0, stateb: [], }; } ' –

+1

Und weil die Kommentarlänge begrenzt ist, musste ich diesen Kommentar hinzufügen, um meine Beispiele zu vervollständigen. Sie könnten den Staat wie so Zugang/set: 'unfoldOpportunity (campaignId) { if (this.state.statea === campaignId) { this.setState ({stateA: 0}); } sonst { this.setState ({statea: campaignId}); } } ' Ich gebe zu, dass es schwierig werden kann, komplizierte UI zu verwalten, aber ich muss die UI in der Regel in separate Komponenten umgestalten, wenn es zu diesem Punkt kommt. –