Reagieren/MobX: Best Practice

Question

Ich bin relativ neu zu React und MobX. Ich habe viele Tutorials zum Reagieren und Reagieren in Kombination mit MobX gelesen/gesehen.

Ich muss ein Formular erstellen, wo ein Benutzer ein Produkt auswählen (Autovervollständigen) kann. Ich verwende react-select, um dies zu tun. Wenn ein Benutzer ein Produkt auswählt, muss die Schnittstelle eine weitere Auswahl mit Speicherorten für das ausgewählte Produkt aktualisieren (die ich noch nicht implementiert habe, aber die Optionen aus dem Standort beobachtbar verwendet).

• Gibt es Best Practices für die Einrichtung der Kommunikation zwischen den reaktiven Elementen und MobX?
• Das 'findProduct' und das 'findLocationAllocationData' werden als eine Aktion definiert. ist das richtig?

Vielen Dank für Ihre Hilfe!

const {observable, action} = mobx; 
    const {observer}   = mobxReact; 

    class MyStore { 
     product = observable({value: null}); 
     locations= observable({value: null,options: [],disabled: true}); 

     findProduct = action((input, callback) => { 
     //ajax call to get products 
     // JSON object as an example 

     callback(null, { 
      options: [{key: 1, value: 1, label: 'product a'}, 
      {key: 2, value: 2, label: 'product b'} 
      ], 
      complete: true 
     }) 
     }); 

     findLocationAllocationData = action(() => { 
      if (null === this.product.value) { 
      return; 
      } 

      //ajax-call to get the locations and to update the location observable options 
     } 
    } 

Und die reagieren Sachen:

class Well extends React.Component { 
     render() { 
      return ( 
      <div className = "well" > 
       <span className = "well-legend" > {this.props.legend} < /span> 
       {this.props.children} 
      </div> 
     ); 
     } 
    } 

    class FormGroup extends React.Component { 
     render() { 
     return ( 
     <div className = "form-group" > 
      <label htmlFor = {this.props.labelFor} > 
       {this.props.label} 
      </label> 
      {this.props.children} 
     </div> 
    ); 
    } 
    } 

    const ProductSelect = observer(class ProductSelect extends React.Component { 
     onChange = (e = null) => { 
     this.props.store.product.value = null !== e ? e.value : null; 
     this.props.store.findLocationAllocationData(); 
     }; 

     getOptions = (input, callback) => { 
     this.props.store.findProduct(input, callback); 
     }; 

     render() { 
     const product = this.props.store.product; 

     return ( 
     <Select.Async 
      id = "product" 
      name = "product" 
      className = "requiredField" 
      loadOptions = {this.getOptions} 
      onChange = {this.onChange} 
      value = { product.value} 
      /> 
     ); 
     } 
    }); 

const MyForm = observer(class MyForm extends React.Component { 
    render() { 
    const store = this.props.store; 

    return ( 
     <div> 
     <form > 
      <Well legend="Step 1 - Product"> 
      <div className="row"> 
       <div className="col-md-4"> 
       <FormGroup label="Product" labelFor="product"> 
        <ProductSelect store={store} /> 
       </FormGroup> 
       </div> 
      </div> 
     </Well> 
    </form> 
    </div> 
    ) 
    } 
}); 


const myStore = new MyStore(); 

ReactDOM.render( 
    <MyForm store={myStore}/>, document.getElementById('root') 
); 

Answer 1

Ihre Aktionen Funktionen sind in Ordnung, aber Sie müssen sich bewusst sein: Aktionen wirkt sich nur auf die aktuell ausgeführte Funktion. Sie können einen Rückruf Aktion wie findLocationAllocationData-callback und findProduct-callback

More info here

MobX erstellen ist keine Architektur, die Sie Ihren Code strukturieren können, wie Sie es wünschen, sind keine Best Practices. Möglicherweise möchten Sie Ihre Aktionen und API-Aufrufe trennen.

Sie können nach this repo für Inspiration suchen.