javascript - MobX 中的事件：从 store 的 action 中调用 view 的方法

Question

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

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

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

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

但是有没有更好的实现这个想法的变体？

Answer 1

您可以从操作中返回承诺，并在解决后做您想做的事情。

例子

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