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.