Async/Await not executing as expected

Question

I have the below method where I am updating store and after store updating, I am performing certain activities based on store values -

useEffect(()=>{

const asyncUpdateStore=async()=>{
  
  await updateStore();
  getDetails(storeValues)    //this is api call made based on updated store values above
   .then(()=>{...})

}
asyncUpdateStore();

},[applyChange]);

Upon execution of this code , I find that getDetails which is internally a axios call is not waiting for store values to be get updated within updateStore() method. When useEffect is getting called second time , I find store is updated.

I want to wait execution of getDetails , till updateStore method finishes its execution.

I have also tried with -

 useEffect(()=>{    
    const asyncUpdateStore=async()=>{      
      await updateStore(); 
    }
    asyncUpdateStore();

getDetails(storeValues)    //this is api call made based on updated store values above
       .then(()=>{...})    
    },[applyChange]);

Edit 1:

updateStore() method involves a dispatch call.

const updateStore=()=>{
 const data:IData={
   value1:valuestate1
   value2:valuestate2
}
dispatch(updateData(data));
}

where is `updateStore` code? Please include. Is `storeValues` a state? — Shan, May 02 '22 at 12:31
As @Shan implies, if `storeValues` is a state value then you won't be able to use the updated value until the next render cycle. see: [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) — pilchard, May 02 '22 at 12:35
If you want you could use new useEffect on changes of `storeValues`? — Michael Štekrt, May 02 '22 at 12:40
why do you need `await` for updateStore? since it is not an async function. If the `data` will be `storeValues` then you should move `getDetails(data)` inside `updateStore` — Shan, May 02 '22 at 12:41
You can await the updateStore() call but it won't work as expected because the function doesn't return a Promise that resolves after the store was updated. However it shouldn't be necessary to do that anyway; changes to the store that require further updating should happen inside the function where you dispatch the first update. This way, using the selector hook in your component will ensure you always have up-to-date data available. — , May 02 '22 at 12:46

Arky Asmal · Accepted Answer · 2022-05-07T06:59:50.397

In redux, all dispatches are synchronous. Using await has no effect there. If updateData() is an asynchronous action, then you may need look at the documentation of the middleware you are using, to handle async actions (i.e redux-thunk, etc).

Usually, the middleware will provide 3 states ("pending", "success", "failed") that you can store in your redux store, and then read in your component. The logic flow could look like this.

    //example route that would store the current status of an async response
    const asyncState = useSelector(state => state.storeValues.status)
    const storeValues = useSelector(state => state.storeValues.data)

    useEffect(()=>{     
      //runs everytime applyChange changes
      dispatch(updateData(data));    
    },[applyChange, dispatch, updateData]);
    //runs everytime an async status changes, due to the api request done above
    useEffect(()=>{    
         //success indicates the promise resolved.
         if(asyncState === "success")
            getDetails(storeValues)    //this is api call made based on updated store values above.then(()=>{...})    
     },[asyncState]);

To understand how async patterns work in redux, or see more examples, you can check out redux's own tutorial and docs here. The have a conceptual diagram of state flow, as well as a ton of guides.

Note: dispatch actions should never be anything but synchronous, as reducers should not have side effects. Redux will throw errors and complain if an action is async, and you may see unexpected behavior in your store if async actions aren't handled outside reducers first.

Async/Await not executing as expected

1 Answers1