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