How can I make a function Async in reactjs which calls another two functions from redux actions

Question

I am using react, with redux for state management. In my UI I have a button which when clicked it calls a function and that function internally calls 2 redux actions that perform the specific task. The problem is my function when I make a call after a click of the button it immediately calls both the functions.

This is my on button click function

const handleDecrement = (productId) => {
    props.minusQuantity(productId, props.guestIdData); // call make to redux action to perform API action

    props.quantityData.forEach((item) => {
        if (item.productQuantity < 1) {  // value of state. Which is instantly changed
            props.removeWholeItem(productId); // Another API call to redux action 
        }
    });
};

I want to call this function first

props.minusQuantity(productId, props.guestIdData);

and thnen later the following code

props.quantityData.forEach((item) => {
        if (item.productQuantity < 1) {  // value of state. Which is instantly changed
            props.removeWholeItem(productId); // Another API call to redux action 
        }
    });

I am already using it. It is used to async the actions. But here I am calling redux action within the function — Sagar Chavan
– Sagar Chavan, Commented Aug 7, 2020 at 7:07

HMR · Accepted Answer · 2020-08-07 08:59:25Z

Assuming that minusQuantity is a thunk action that returns a promise you can await it:

const minusQuantity = (productId, guestIdData) => (
  dispatch,
  getState
) => {
  return Promise.resolve('async value');
};

Now both of the other answers would work:

const handleDecrement = async (productId) => {
  await props.minusQuantity(productId, props.guestIdData);

or

const handleDecrement = (productId) => {
  props.minusQuantity(productId, props.guestIdData).then(
    ()=>{
      //do other stuff here
    }
  )

Working example:

const { Provider, connect } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;

const initialState = {};
//action types
const BEFORE_ASYNC = 'BEFORE_ASYNC';
const AFTER_ASYNC = 'AFTER_ASYNC';
//action creators
const minusQuantity = () => (dispatch) => {
  dispatch({ type: BEFORE_ASYNC });
  //note it is returning a promise
  return new Promise((resolve) =>
    setTimeout(
      () => resolve(dispatch({ type: AFTER_ASYNC })),
      2000
    )
  );
};
const reducer = (state, { type }) => {
  console.log('reducer called with action:', type);
  return state;
};
//creating store with redux dev tools
const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
  reducer,
  initialState,
  composeEnhancers(
    applyMiddleware((store) => (next) => (action) =>
      typeof action === 'function' //DIY thunk middleware
        ? action(store.dispatch)
        : next(action)
    )
  )
);
const App = (props) => {
  const handleDecrement = (productId) => {
    console.log('in handeDecrement starting async action');
    props
      .minusQuantity(productId)
      .then(() =>
        console.log('in handleDecrement after async action')
      );
  };
  return (
    <button onClick={handleDecrement}>
      start async action
    </button>
  );
};
const AppContainer = connect(undefined, {
  minusQuantity,
})(App);
ReactDOM.render(
  <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>

miuosh · Accepted Answer · 2020-08-07 07:10:21Z

1

Use redux-thunk and bind your button onClick function as async.

handleClick = async () => {
  await props.actions.someReduxThunkFn();
  await props.actions.otherReduxThunkFn();
}

answered Aug 7, 2020 at 7:10

miuosh

9363 gold badges14 silver badges38 bronze badges

Comments

Mayur Sonawane · Accepted Answer · 2020-08-07 07:22:59Z

1

You can use .then and .catch and makes function calls one after another.

props.minusQuantity(productId, props.guestIdData).then(response=>{ props.removeWholeItem(productId) })

answered Aug 7, 2020 at 7:22

Mayur Sonawane

1171 gold badge1 silver badge8 bronze badges

Collectives™ on Stack Overflow

How can I make a function Async in reactjs which calls another two functions from redux actions

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related