Async/Await 没有按预期执行

Question

我使用以下方法更新商店，并在商店更新后根据商店价值执行某些活动 -

useEffect(()=>{

const asyncUpdateStore=async()=>{
  
  await updateStore();
  getDetails(storeValues)    //this is api call made based on updated store values above
   .then(()=>{...})

}
asyncUpdateStore();

},[applyChange]);

执行此代码后，我发现内部调用 axios 的 getDetails 没有等待存储值在 updateStore() 方法中更新。当第二次调用 useEffect 时，我发现商店已更新。

我想等待 getDetails 的执行，直到 updateStore 方法完成执行。

我也试过 -

 useEffect(()=>{    
    const asyncUpdateStore=async()=>{      
      await updateStore(); 
    }
    asyncUpdateStore();

getDetails(storeValues)    //this is api call made based on updated store values above
       .then(()=>{...})    
    },[applyChange]);

编辑 1：

updateStore() 方法涉及调度调用。

const updateStore=()=>{
 const data:IData={
   value1:valuestate1
   value2:valuestate2
}
dispatch(updateData(data));
}

Answer 1

在 redux 中，所有调度都是同步的。使用 await 在那里没有效果。如果 updateData() 是异步操作，那么您可能需要查看您正在使用的中间件的文档，以处理异步操作（即 redux-thunk 等）。

通常，中间件会提供 3 种状态 ("pending", "success", "failed")，您可以将它们存储在您的 redux 存储中，然后在您的组件中读取。逻辑流程可能如下所示。

    //example route that would store the current status of an async response
    const asyncState = useSelector(state => state.storeValues.status)
    const storeValues = useSelector(state => state.storeValues.data)

    useEffect(()=>{     
      //runs everytime applyChange changes
      dispatch(updateData(data));    
    },[applyChange, dispatch, updateData]);
    //runs everytime an async status changes, due to the api request done above
    useEffect(()=>{    
         //success indicates the promise resolved.
         if(asyncState === "success")
            getDetails(storeValues)    //this is api call made based on updated store values above.then(()=>{...})    
     },[asyncState]);

要了解异步模式在 redux 中的工作原理，或查看更多示例，您可以查看 redux 自己的教程和文档 here。它们有状态流的概念图，以及大量指南。

注意：分派动作除了同步之外永远不应该是任何东西，因为 reducer 不应该有副作用。如果一个动作是异步的，Redux 会抛出错误并抱怨，如果异步动作没有首先在 reducers 之外处理，你可能会在你的商店中看到意想不到的行为。

Async/Await 没有按预期执行

Async/Await not executing as expected

javascript

reactjs

redux