仅当另一个函数在 React 中完成运行时才调用一个函数

Question

我有一个遵循 Flux 数据模式的函数，我这样称呼它

UserService.createNewUser(data);

一旦这个创建用户的函数完成执行，我想运行另一个遵循相同数据模式的函数：

NextService.createNewMessage(data);

我该如何设置它，这样NextService 只会在 UserService 完成运行后被调用？

用户存储：

getUser: function() {
    return User;
  },
addChangeListener: function(callback) {
    this.on(CHANGE_EVENT, callback);
  },
  removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  }

听完变化后我打电话给：

if (UserStore.getUser()) {
// in here is where I run NextService.createNewMessage(data); 
}

但是在 createNewUser 完成之前调用 UserStore

Answer 1

如果您遵循通量模式，那么我假设这些服务具有 addChangeListener 函数？如果是这样，我建议在您的组件中添加一个更改侦听器，例如调用 NextService：

class YourComponent extends React.Component{
    constructor(props){
        super(props);
        this._handleStoreChange = this.handleStoreChange.bind(this);
    }
    handleStoreChange(data){
        NextService.createNewMessage(data);
    }
    componentDidMount(){
        UserService.addChangeListener(this._handleStoreChange);
    }
    componentWillUnmount(){
        UserService.removeChangeListener(this._handleStoreChange);
    }
    render(){
        return (
            <h1>hello</h1>
        );
    }
}