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

redux onclick dispatch
mapdispatchtoprops
wait for dispatch to finish redux
redux dispatch action from reducer
redux dispatch action on button click
redux dispatch callback
redux onclick example
react redux

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 {
  }
}

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,
    });
  }
}

Dispatching on Click ― Scotch.io, Let's first create the reducer that will handle updating our state. Dispatching on Click Now we need to dispatch this action when a character is clicked on. our setCurrentCharacter action creator and then dispatches that action to the store. For new, custom events, there are definitely no default browser actions, but a code that dispatches such event may have its own plans what to do after triggering the event. By calling event.preventDefault (), an event handler may send a signal that those actions should be canceled. In that case the call to elem.dispatchEvent (event) returns false.

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.

wait for dispatch to complete � Issue #88 � jeffbski/redux-logic � GitHub, This can be solved by reading the state AFTER the action is done, but I think done(data) should somehow return that data. Wait for dispatch to� How do I link the Daily Dispatch to my website? Many sites have asked us for a graphic that can be displayed on their site as a link to the Daily Dispatch. We've designed banners and buttons for those who would like to use them, Please email us at advertising@dailydispatch.com to receive the image in the format that works best for your site.

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

Different Ways to Dispatch Actions with Redux, The above implies that we do not need to dispatch our actions. onIncAsync }) = > <div> <button onClick={onIncAsync}> Increase after 1 second Unlike in redux -thunk, our component here dispatches a plain object action. Our Saga worker would perform the async inc task export function* incAsync()� In your case, passing a function to connect was not needed, since you could instead pass an object that references your action creators. So you're still passing props to your component that can dispatch actions to the store, you're just doing it a different way.

Actions Life Cycle, If you click the button twice - two actions will be dispatched and the previous use the async/await javascript syntax then NGXS will know about the completion � the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters”. So basically it returns a function, and you can delay your dispatch or put it in a condition state. So something like this is going to do the job for you:

Connect: Dispatching Actions with mapDispatchToProps � React , React Redux gives you two ways to let components dispatch actions: functions that dispatch when called, and pass those functions as props to your component. The mapDispatchToProps functions are normally referred to as mapDispatch for short, function Counter({ count, dispatch }) { return ( <div> <button onClick={()� Insert a button above the <ul> and give it an onClick prop that dispatches an action with type “clear”. Then, add a case to the reducer that handles the “clear” action. Open up the previous CodeSandbox checkpoint and make your changes (don’t worry, it won’t overwrite my sandbox).

createAsyncThunk, It will pass whatever value you give it and return it in the payload of the rejected action. condition : a callback that can be used to skip execution of the payload creator and all action dispatches, if desired. dispatch the pending action; call the payloadCreator callback and wait for the returned const onClick = () => {. So this week we thought we’d talk about warehouse efficiency and what you can do to improve your dispatch process. If your business is feeling the pressure and struggling to get customer orders out on time, here are our 5 tips on how you can improve operations and increase efficiency moving forward…

Comments
  • i have all of this in my saga. The problem is return value.ecToken; gets executed even before the saga completes execution.
  • I have put 2 console.log now. Ideally, the console should log "1" and then "2". But its logging "2" and then "1". please see where i put console.log in above code.
  • because you start an action in executeOrder function, it surely go first. you have to use ComponentDidMount to wait response API.
  • Cn i use something like this to ensure it waits till i get state values to props ? setTimeout(() => { props.initiateIdentity(props.orderTotal); }, 20000);
  • I don't think that's a good idea. In redux way, when you make the subscription properly, you will get the latest value of state in time. If you want to make sure the value is there before some operation/view changes, go ahead to check the value of state somewhere. Or, you can add additional flag variable in redux store like 'API_SUCCESS' and its value is either true or false. In your application you will be able the know if the ecToken is ok to use or not by checking the value of 'API_SUCCESS' .
  • @Pengson- can i use javascript await in my action dispatch ? something like await props.initiateIdentity(props.orderTotal);
  • Yes, you can if the function is async but I doubt it will not work as you expected. I recommend you read the official doc redux.js.org/introduction/getting-started to understand the concept of Redux.
  • Hi Amruta, i am using useEffect instead of componentDidUpdate now. Its as below useEffect(() => { if (this.props.ecToken !==null && this.props.ecToken !== "") { return props.ecToken; } }); do you know how i can return from a react lifecycle hook. i want to return props.ecToken but its not allwing me. it gives a error as Argument of type '() => string' is not assignable to parameter of type 'EffectCallback'. Type 'string' is not assignable to type 'void | (() => void)'.
  • @user3019647 I have less experience with hooks, but from what I remember you can only return a function or an undefined from useEffect. return props.ecToken; however, is returning a string. You can call a method with ecToken as its parameter, and in that method assign ecToken to some variable. useEffect(() => { if (this.props.ecToken !==null && this.props.ecToken !== "") { return this.method(props.ecToken;) } });