react/mobX：最佳實踐

Question

我是React和MobX的新手。我讀過/看過很多關於反應的教程，並與MobX結合起來反應。

我需要創建一個表單，用戶可以在其中選擇（自動完成）產品。我正在使用react-select來執行此操作。當用戶選擇一個產品時，界面需要更新另一個選擇，包含所選產品的位置（我還沒有實現，但它將使用位置可觀察的選項）。

• 有沒有關於如何設置反應元素和MobX之間的通信的最佳實踐？
• 'findProduct'和'findLocationAllocationData'被定義爲一個動作。它是否正確？

感謝您的幫助！

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 
     } 
    } 

而且反應的東西：

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

你的行爲功能是不錯，但你必須明白：動作隻影響當前正在運行的功能。您可能希望創建一個回調的動作像findLocationAllocationData-callback和findProduct-callback

More info here

MobX不是一個架構，你想有沒有最佳實踐，你可以組織你的代碼。你可能想分開你的動作和你的API調用。

你可以看看this repo的靈感。