onClick dispatches an action. How do i wait for my dispatch to complete?

Question

I had this executeOrder function in my child component. this was directly calling the API to get data from backend in this way

const executeOrder = async (data, actions) => {
      value = await getToken(
        props.orderTotal
      );
      return value.ecToken;

  };

As you can see, i was using await function in my executeOrder . With this, it would wait for the execution to complete and then provide me a return value.ecToken

Since i am using REACT, i had to make use of action dispatcher and make a API call from my Redux saga file. So i created an action dispatcher and made a API call this way.

const executeOrder = (data, actions) => {
    props.initiateIdentity(props.orderTotal); //ACTION DISPATCHER
    console.log("2");
    return props.ecToken;
  };

Now how do i ensure this action dispatcher completes it execution ? Because, i am dispatching the action and making a API call. The response of the API call, i am putting it in a state and passing that state value from main component to child component via mapStateToProps

By the time props.initiateIdentity(props.orderTotal) is getting executed, it goes to next line return props.ecToen and since this value is still not provided back from API call, i get a blank value.

How do i ensure this action dispatcher has finished its task ?? Someone please help me

PS- here is my SAGA

function* initiateIdentity(action: TInitiateIdentPayPal) {
  try {
    const resp = yield call(
      getToken,
      orderTotal,
    );
    console.log("1");
    yield put(savePiBlob(resp));
  } catch (err) {
  } finally {
  }
}

Answer 1

In your case, You have to create 3 status constant of a actions and you get the response in function* in saga file. Your saga function should be look like:

function* callApiInSaga(actions) {
  try {
    const data = yield callApiByAxiosOrFetch({ type: actions.data });
    yield put({ 
      type: constants.CALL_API_SUCCESS,
      data,
    }); `// if your function calling api is executed, and you get response from server, put({}) in saga will have you transfer data from saga to reducer. and you can use data via mapDispatchToProps:`
  } catch (error) {
    yield put({
      type: constants.CALL_API_FAILED,
    });
  }
}

Answer 2

Sorry, you cannot achieve it that way.

In the world of Redux, do mutation(by dispatching actions) and get the latest state are two sorts of operations and never mixed out. redux will resolve the updated state somehow, but cannot guarantee the exact timeslot.

Answer 3

If you store ecToken in your redux store then you don't need to return its value from executeOrder . Instead when you call savePiBlob(resp) you can update ecToken in your reducer. The parent can access ecToken with mapStateToProps .

Or if you do want to return ecToken from the child component then use componentDidUpdate to check if ecToken is updated and then return ecToken by calling a parent method.

   componentDidUpdate(prevProps) {
      if (this.props.ecToken !==null && this.props.ecToken !== prevProps.ecToken) 
      {
        //call parent method here
      }
   }

My if condition might not be accurate. you can add whatever works for you