I am attempting to recycle one of my actions. Here is the structure of my actions:
const actions = {
changeStage: (data: Object) => (dispatch) => {
return new Promise((resolve) => {
dispatch({type: ACTION_TYPES.Loader, payload: "Loading"});
resolve();
})
.then(() => {
return serviceCallToChangeStage(data);
})
.catch((str: string) => {
dispatch({type:ACTION_TYPES.error, payload: str});
});
}
I intend to reuse the above action in another action as shown below:
changeStageAndSaveData: (data: Object) => (dispatch) => {
return new Promise((resolve) => {
dispatch({type: ACTION_TYPES.Loader, payload: "Loading"});
resolve();
})
.then(() => { //This is where I want to re-use
if(certainCondition){
return actions.changeStage(data);
}
}
.then(() => {
return saveDataThroughServiceCall(data);
})
.catch((str: string) => {
dispatch({type:ACTION_TYPES.error, payload: str});
});
}
When I try to do return actions.changeStage(data), it does not execute for some reason. If I dispatch on that actions.changeStage(), the second service call starts immediately without waiting for the previous call to finish. Since both my actions are enclosed in promises, I assume they should be reusable with a return statement. What am I overlooking?