MobX中的事件：从商店的操作调用视图方法

Question

我如何从MobX中的商店的异步操作调用视图方法？例如，我有代码，如下所示：

@action
someAction() {
  longOperation()
    .then(() => { })
    .catch(error => { });
}

当函数成功或失败时，应调用视图中的某些方法，例如，在push上显示错误对话框或调用Navigator方法。

目前，我有一个想法：在商店中创建一个具有状态的可观察字段。当状态发生变化时，我的视图的render方法将会调用，我将可以处理已发生的操作并重置存储状态。

但这个想法的实施有哪些更好的变体？

Answer 1

你可以return the promise from the action and just do what you want once it has resolved。

示例

function longOperation() {
  return new Promise(resolve => setTimeout(resolve, 3000));
}

class Store {
  @observable data = 'foo';
  @action
  someAction() {
    return longOperation()
      .then(() => this.data = 'bar')
      .catch(e => console.log(e));
  }
}

const store = new Store();

@observer
class App extends React.Component {
  @observable stuff = 'test';
  onClick = () => {
    store.someAction().then(() => this.stuff += '!');
  };
  render() {
    return (
      <div onClick={this.onClick}>
        {`${this.stuff} ${store.data}`}
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);