Tengo el siguiente método en el que actualizo la tienda y, después de la actualización de la tienda, realizo ciertas actividades en función de los valores de la tienda:
useEffect(()=>{ const asyncUpdateStore=async()=>{ await updateStore(); getDetails(storeValues) //this is api call made based on updated store values above .then(()=>{...}) } asyncUpdateStore(); },[applyChange]);Tras la ejecución de este código, encuentro que getDetails, que es internamente una llamada axios, no está esperando que los valores de la tienda se actualicen dentro del método updateStore(). Cuando se llama a useEffect por segunda vez, encuentro que la tienda está actualizada.
Quiero esperar la ejecución de getDetails, hasta que el método updateStore finalice su ejecución.
También he probado con -
useEffect(()=>{ const asyncUpdateStore=async()=>{ await updateStore(); } asyncUpdateStore(); getDetails(storeValues) //this is api call made based on updated store values above .then(()=>{...}) },[applyChange]);Edición 1:
El método updateStore() implica una llamada de despacho.
const updateStore=()=>{ const data:IData={ value1:valuestate1 value2:valuestate2 } dispatch(updateData(data)); }En redux, todos los envíos son sincrónicos. El uso await no tiene ningún efecto allí. Si updateData() es una acción asíncrona, es posible que deba consultar la documentación del middleware que está utilizando para manejar las acciones asíncronas (es decir redux-thunk , etc.).
Por lo general, el middleware proporcionará 3 estados ( "pending", "success", "failed" ) que puede almacenar en su tienda redux y luego leer en su componente. El flujo lógico podría verse así.
//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]);Para comprender cómo funcionan los patrones asíncronos en redux, o ver más ejemplos, puede consultar el tutorial y los documentos de redux aquí . Tienen un diagrama conceptual del flujo de estado, así como un montón de guías.
Nota: las acciones de envío nunca deben ser sino sincrónicas, ya que los reductores no deben tener efectos secundarios. Redux arrojará errores y se quejará si una acción es asíncrona, y es posible que vea un comportamiento inesperado en su tienda si las acciones asíncronas no se manejan primero fuera de los reductores.