Cómo dispatch ejecuta actions asincrónicas en ViewX

Domina las actions en ViewX para manejar código asincrónico sin bloquear el flujo de la interfaz. Aquí verás cómo usar setTimeout, context, payload, dispatch y Promise para actualizar el store con seguridad, y encadenar lógica con then cuando la operación termine.

¿Por qué las actions resuelven el asincronismo en ViewX?

Las mutations son sincrónicas, por eso no deben ejecutar llamadas HTTP. Si una mutation dispara una llamada asincrónica, el store se actualiza antes de que termine la petición y el resto de los componentes no verán el estado correcto. Las actions solucionan esto: permiten ejecutar código asincrónico y, al finalizar, commitear una mutation.

• Las mutations actualizan el estado en el momento.
• Las actions esperan a que el proceso asincrónico termine.
• Luego usan context.commit para aplicar la mutation con el payload adecuado.

¿Qué es context y cómo usar commit de forma segura?

El context representa la instancia del store. Desde allí accedes a mutations y getters. En una action, lo correcto es usar context.commit('increment', payload) al finalizar la operación.

• context es el puente hacia el store.
• commit dispara la mutation adecuada.
• El payload transporta la información necesaria.

¿Cómo simular una llamada asincrónica con setTimeout?

Para simular asincronía se usa setTimeout: se “duerme” la ejecución y, tras 2 segundos, se hace el commit. Así se prueba que el estado solo se recompone cuando corresponde.

// store.js (versión básica)
export default {
  actions: {
    incrementAsync(context, payload) {
      setTimeout(() => {
        context.commit('increment', payload);
      }, 2000); // 2 segundos
    }
  }
};

¿Cómo disparar la action desde un componente con dispatch?

Desde el componente se invoca la action con dispatch. Se añade un botón que ejecuta un método local, y ese método llama this.$store.dispatch('incrementAsync', payload).

• Usa un botón con @click para la acción del usuario.
• En el método incrementAsync, dispara el dispatch.
• Envía un payload con el valor a incrementar (por ejemplo, number: 2).

<!-- app.vue -->
<template>
  <button @click="incrementAsync">+ async</button>
</template>

<script>
export default {
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync', { number: 2 });
    }
  }
}
</script>

• Comportamiento esperado: tras hacer clic, pasan 2 segundos y se actualiza el contador.
• Ejemplo narrado: de 68 pasa a 72 después del retraso.

¿Cómo encadenar lógica tras la action con promises?

Para ejecutar código cuando la action termina, haz que la action devuelva una Promise de ECMA Script 2015. Luego, en el componente, usa then para correr la siguiente lógica (por ejemplo, un console.log).

// store.js (action devolviendo una Promise)
export default {
  actions: {
    incrementAsync(context, payload) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('increment', payload);
          resolve();
          // Si hubiera error, se usaría reject().
        }, 2000);
      });
    }
  }
};

// app.vue (encadenando lógica con then)
export default {
  methods: {
    incrementAsync() {
      this.$store
        .dispatch('incrementAsync', { number: 2 })
        .then(() => {
          console.log('action terminada');
        });
    }
  }
}

• Promise permite controlar el flujo tras la acción.
• resolve indica que todo salió bien.
• reject se usaría ante errores (por ejemplo, un status distinto de 200).
• then ejecuta la lógica siguiente cuando la acción finaliza.

¿Te gustaría ver cómo integrar estos patrones en tu proyecto, como Platzi Music? Cuéntame en los comentarios qué parte quieres profundizar o qué reto estás enfrentando al manejar asincronía con ViewX.