Mobx, как `@ action` обрабатывается с помощью функции обратного вызова - PullRequest
Новая
       12

Mobx, как `@ action` обрабатывается с помощью функции обратного вызова

0 голосов
/ 01 апреля 2019

Я хочу поместить операцию HTTP в хранилище, а не в компонент, который столкнется с проблемой.Я хочу всплывающее окно с тостом после ошибки HTTP, которая должна обрабатываться компонентом.Я хотел бы знать, что я должен сделать.Спасибо

Это мой поддельный код.https://codesandbox.io/s/j4m351ryw

  // store
  @action.bound
  async updateCount(_count, callback) {
    this.count = _count;
    try {
      // call http service
      const response = await MyService();
      if (response.error) {
        callback(response.error);
      }
    } catch (error) {
      callback(error);
    }
  }

  // component
  click = () => {
    const store = this.props.store;
    // The way we do it now
    // Is there a better way to handle it
    store.updateCount(3, err => {
      if (err) {
        alert("error");
      }
    });
  };

1 Ответ

0 голосов
/ 04 апреля 2019

Вы можете решить этот случай следующим образом: 

  // store
  @observable updateError = null;

  @action.bound
  async updateCount(_count, callback) {
    this.count = _count;
    try {
      // call http service
      const response = await MyService();
      if (response.error) {
        this.updateError = response.error;
      }
    } catch (error) {
      this.updateError = error;
    }
  }

  // component
  click = () => {
    this.props.store.updateCount(3);
  };

  render() {
    if (this.props.store.updateError) {
      return <h1>Error happened during update. Details {this.props.store.updateError}<h1>
    }

    return <YourComponent/>
  }

Преимущество такого решения состоит в том, что вы разделяете свою бизнес-логику и логику вашего компонента, а не смешиваете бизнес-логику с кодом обработчиков событий компонента.

...