Scenario: I am developing a shopping cart page with react and javascript . i have 2 sections in it , shipping address and billing address .
I am storing both the addresses in the redux after user exits from these sections . After this when user clicks on place order , i need to call an API to validate both the addresses and then if those are valid i have to finally call the Order API.
I tried multiple approaches and am facing different challenges in them:
Approach 1: Whenever user clicks on the order button , i am calling validation API , but i can not store there result in the redux because , as soon as the api is called i have to check for the result and then based on the result either call the different component or another api. As redux state will set in async manner , which will not allow me to check for the condition soon after setting it. So in this approach am stuck at this point .?
Approach 2: To successfully have the validation responses stored in redux , i tried to make the validation api call as soon as user tabs out of the address fields and then store them into redux . so that by the time user comes to place order we have the result in redux state , but if the validation api call is taking some time and within this time user clicks on order , then it will accept the order call and calls this api , which i do not want to happen. So to avoid this i tried to maintain a counter in redux state as activeCalls and every time an api call is in progress counter increases and after completion counter decreases. But when user clicks on order , i want to check if activeCalls count is 0 then call order api else wait for other calls to get completed and then call order api. So how can i make the api call wait until that counter turns 0.?