Async/await pattern with async actions #536
Description
I would like to use asyc/await instead of flux async actions with action.completed/action.failed child actions, but after staring at some of the issues related to async actions, I'm unsure how to proceeds. I've looked at this one in particular:
The core of what I am trying to accomplish is to call two async actions aimed at to different stores, one after the other in a React component as follows:
// Inside some React class component
async componentDidMount() {
// Aimed at the `ChannelQueueStore`
await ChannelQueueActions.loadTickets(this.props.loggedInAgent);
// Aimed at the `ChatStore`
await ChatActions.updateChannel(this.state.selectedChannel);
}My ChannelQueueStore as currently implemented is defined below, and as written the above code does not work. ChatActions.updateChannel is triggered immediately after ChannelQueueActions.loadTickets instead of waiting.
I'm wondering if someone can suggest a way to refactor the below code so the above will work.
// Inside my `ChannelQueueStore` store
export default class ChannelQueueStore extends Reflux.Store {
constructor() {
super();
this.state = {
selectedChannel: null,
channels: []
};
this.tw = new TwilioWrapper(); // Has a bunch of promise returning async functions
this.listenTo(ChannelQueueActions.loadTickets, this.onLoadTickets);
}
async onLoadTickets(agentID) {
// getOpenChannelsOwnedbyAgentSerialized is an `async` function, use await to wait until its done.
let channels = await this.tw.getOpenChannelsOwnedbyAgentSerialized(agentID);
this.setState({
selectedChannel: channels[0].uniqueName,
channels: channels
});
}
}I could call ChatActions.updateChannel(this.state.selectedChannel) from at the end of onLoadTickets, which works but seems like bad form, and I think putting both action calls in the component itself makes it easier to see whats going on in the component.
Thx.