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

我如何从MobX中的商店异步动作中调用视图方法？例如,我有这样的代码：

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

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

目前,我有一个主意：在商店中创建一个具有状态的可观察字段.当状态改变时,我的视图的渲染方法将被调用,我将处理发生的动作并重置存储中的状态.

但是,此想法的实现是否有更好的变体？

解决方法:

您可以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')
);

标签：react-native,mobx,mobx-react,javascript
来源： https://codeday.me/bug/20191111/2021414.html