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

Question

我如何从 MobX 中的 store 异步操作中调用视图方法？例如，我有这样的代码：

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

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

目前，我有一个想法：在商店中创建一个具有状态的可观察字段。当状态发生变化时，我的视图的 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')
);

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

Events in MobX: call method of view from action of store

javascript

react-native

mobx

mobx-react