React/MobX: 最佳实践

Question

React/MobX: 最佳实践

javascriptreactjsmobxmobx-react

3

我对React和MobX还比较新。我已经阅读/观看了很多关于React以及React与MobX结合使用的教程。

我需要创建一个表单，用户可以在其中选择（自动完成）产品。我正在使用react-select来实现这一点。当用户选择产品时，界面需要更新另一个选择器，以显示所选产品的位置（我尚未实现，但它将使用位置可观察对象中的选项）。

有没有任何“最佳实践”来设置React元素和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
        }
    }

还有React相关内容：

 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')
);

- N.P.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan Dion · Accepted Answer

您的操作函数很好，但您必须注意：操作仅影响当前运行的函数。您可能希望创建一个回调操作，例如findLocationAllocationData-callback和findProduct-callback 此处有更多信息 MobX不是一种可以随意构建代码架构的体系结构，也没有最佳实践。您可能希望将操作和API调用分开。

您可以查看此存储库以获取灵感。