How does one await the completion of a task or suspend a method in a component?

584 Views Asked by At

I am using a third party library that renders some UI. The api has a callback function so one can run necessary code before invoking the next UI change in the third party library. In my scenario, I perform a user action (clicking a button), the third party library starts processing the action, the call back method is invoked, I fire off an action that my store is listening to which then updates my own UI.

The problem I am running is that the third party library is dependent on my UI updating before it updates its own UI. In the callback method where after I fire off my action, the call back method ends before my store has completed the code in it's event handler. I would like my action to fire in the callback method and for the callback method to wait until my own UI update has finished before continuing.

Example Scenario Code:

Action

var Actions = Reflux.createActions([
    "updateUI"
]);

Store

class Store extends Reflux.Store {
    constructor(props) {
        super(props)
        this.listenables = Actions;
    }

    onUpdateUI(){
        //Update the UI
    }
}

Component

class Component extends Reflux.Component{

    handleCallback(){
        Action.updateUI();
        // Wait until UI has updated or wait x amount of time before 
        //returning.
    }

    render(){
        return(
            <ThirdPartyComponent callback = {this.handleCallback} />
        );
    }
}

I have looked at several different methods of handling this (Promises, async/await, creating a callback for the action) and each have their draw backs and none gave examples following the unidirectional flow that Reflux offers. I am curious if there is a proper way of handling this type of scenario.

0

There are 0 best solutions below