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的灵感。