如何在 reactjs 中进行 function 异步，它从 redux 操作中调用另外两个函数

Question

我正在使用反应，redux 用于 state 管理。 在我的用户界面中，我有一个按钮，单击该按钮时会调用 function 内部调用 2 个 redux 操作来执行特定任务。 问题是我的 function 在单击按钮后拨打电话时，它会立即调用这两个功能。

这是我的按钮点击 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 
        }
    });
};

我想先调用这个 function

props.minusQuantity(productId, props.guestIdData); 

然后是以下代码

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

Answer 1

使用 redux-thunk 并将您的按钮 onClick function 绑定为异步。

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

Answer 2

您可以使用.then 和.catch 使 function 一个接一个地调用。

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

Answer 3

假设 minusQuantity 是一个返回promise 的 thunk 操作，您可以等待它：

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

现在其他两个答案都可以工作：

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

或者

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

工作示例：

 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>