In my code, I have a primary thunk that is triggered by a button click. Within this thunk, I need to invoke another thunk and ensure it completes before proceeding. The second thunk returns a promise.
Below is an excerpt of the code in question:
export function mainThunk(): ThunkAction<void, void, void, AnyAction> {
return (dispatch: Dispatch<any>) => {
...perform some actions
dispatch(secondThunk()).then(() => {
...continue with other actions
})
};
}
export function secondThunk(): ThunkAction<Promise<any>, void, void, AnyAction> {
return (dispatch: Dispatch<any>) => {
return new Promise((resolve: any, reject: any) => {
executeSomeAsyncFunction()
.then((response) => {
return Promise.all(someArray.map(someId => {
return executeAnotherAsyncFunction(someId):
}));
})
.then((responses) => {
responses.foreach(response => {
dispatch(dispatchReduxAction(response.someField));
});
})
.then(() => {
resolve();
});
});
};
}
While the code appears to function correctly during runtime, I encounter a compilation error stating:
Property "then" does not exist on type "ThunkAction<Promise<any>, void, void, AnyAction>"I've reviewed various Stack Overflow threads but haven't been able to pinpoint why TypeScript is flagging this as incorrect. If you have any insights or suggestions, they would be greatly appreciated!