How to know all async calls are complete when using async thunk?

[heart2friend]

Hi All, I have to keep an option selected by default in dropdown based on some conditions and it will sort data on first load based on selected option. sorting can happen only when all child requests are complete. How we can determine whether all async call made via async thunk are complete and data is loaded? so I can trigger sort.

Here is an example

I have sales order, each sales order can have multiple product. each product can have multiple bin. once all bins are loaded I want to trigger sort. I get products with sales order then it's loaded in component. on Product component giving call to get bin details of product. bins will be rendered in bin component.

Really appreciate the help.

[markerikson]

Generally, await dispatch(someAsyncThunk()):

• https://redux.js.org/tutorials/essentials/part-5-async-logic#checking-thunk-results-in-components
• https://redux.js.org/tutorials/fundamentals/part-7-standard-patterns#thunks-and-promises

[heart2friend]

Hi @markerikson thank you for your prompt response. I wasn't aware about this. certainly it help me solve some other scenarios :).

I am able to detect whether all async calls are complete or not. I have used "react-promise-tracker" to track "promiseInProgress" on parent component. I have wrapped dispatch inside trackPromise method.