Supongamos que tengo dos despachos que quiero disparar en orden llamados
dispatch(action1()) dispatch(action2())Action1 es un creador de acciones creado usando
createAsyncThunkmétodo de redux/toolkit.
Por lo tanto, usa async... await en el proceso.
Action2 es un proceso síncrono.
yo quiero hacer
`dispatch(action2())` run only after `action1()` has been dispatched.¿Cómo puedo conseguir esto?
he intentado hacer
dispatch(action1(), dispatch(action2())pero descubrí que enviar dentro de un reductor es un antipatrón ya que los reductores son puros.
Ver Desenvolver acciones de resultados
Los procesadores pueden devolver un valor cuando se envían. Un caso de uso común es devolver una promesa del procesador thunk, enviar el procesador thunk desde un componente y luego esperar a que se resuelva la promesa antes de realizar un trabajo adicional:
Así que puedes hacer esto:
dispatch(action1()).then(() => { dispatch(action2()); })Una forma sencilla podría ser dejar que action1 envíe condicionalmente action2 donde la necesite:
const action1 = createAsyncThunk( 'actions/1', async (args, thunkAPI) => { const response = await someApi.fetchStuff(args.id); if (args.condition) { thunkAPI.dispatch(action2()); } return response.data } );Esto solo funciona si no depende de que el reductor haya actualizado el estado en ese punto (generalmente con este tipo de escenario se trata de que el trabajo asincrónico haya terminado).
Sin embargo, si también depende de la actualización de estado, intente el dispatch(action1()).then(...) responda a alguien más.
Otra opción es escribir un procesador "clásico" (sin usar createAsyncThunk ) que coordine la secuencia de action1 y action2.
Personalmente, prefiero la última opción, ya que los fragmentos más grandes se pueden componer muy bien de muchos fragmentos más pequeños.
En caso de que se lo pregunte, createAsyncThunk no está destinado a enviar otra acción al devolver su resultado, lo que también habría resuelto su problema: https://github.com/reduxjs/redux-toolkit/issues/773