Fetching data from Redux synchronously

[VaZark]

Is there a way to await the completion of dispatch so that the following statement can be fired synchronously after their completion? Currently, I observe that the app selector in the function following the dispatch statements is not updated when invoking the API call.

It would be fine to move the dispatch statements into the invoking call but is there a way to do something like thread.join() or some sort of await for the data.

Code Example

handleSubmit = () => {
        //      ......
        dispatch(updateClient(client_contact));
        dispatch(updateClientAddress(client_addr);
        finalizeDemande(); // must be fired after dispatch
}

const finalizeDemande = () => {
     const state = useAppSelector(state => state)
     // Make API call with state data as body
     // data from the latest dispatches is not reflected here
}

[markerikson]

Dispatching a plain action is always synchronous, and the state update is complete as soon as the dispatch(someAction) call returns. However, the React component will not have re-rendered yet. More to the point, the closure in this function component can only see the values that existed in scope at the time the component last rendered and created this function.

If you need to access the latest state right after a dispatch is complete, the right answer is to move this code into a thunk and do all the work there:

function myThunk(someArg) {
  return (dispatch, getState) => {
    dispatch(someOtherAction(arg));
    const updatedState = getState()
    
    // do something with the updated state here
  }
}

// in the component
const handleClick = () => {
  dispatch(myThunk(123))
}

[VaZark]

My use case does not match well with it, as the return of the function call is used for redirection and adding it to store just to retrieve it locally when it does not impact the UI is counterintuitive.

I'll just put it within the function after my API call then. thanks!

[markerikson]

I'm not sure I understand what you're describing there. Can you give more details and example code?

The point of "moving logic into a thunk" is that you have access to getState, because you said you needed access to the latest store state right after the dispatches are done. Is there something else going on beyond that?