redux-saga: efectos como valores con generadores

redux-saga toma el camino opuesto al del thunk: en lugar de ejecutar el efecto, lo describe. Una saga es un generador —una función que puede pausarse y reanudarse— que en cada yield no lanza la petición ni hace el dispatch, sino que entrega un objeto plano que dice qué habría que hacer: call(api, id), put(accion), take(evento). El middleware de saga recibe esa descripción, ejecuta el efecto de verdad y reanuda el generador inyectándole el resultado en el punto exacto donde se pausó. Esa inversión —efectos como valores, no como acciones— compra dos cosas enormes: unos tests que se escriben afirmando sobre objetos planos sin tocar el mundo, y una cancelación limpia, porque interrumpir un generador es trivial. El precio es una curva real: dejas de pensar en recados y empiezas a pensar en coreografía.

Efectos como valores: yield describe, no ejecuta

Un generador es una función marcada con asterisco que puede rendir el control a mitad de camino: cada yield entrega un valor hacia fuera y suspende la ejecución, y quien la reanuda puede inyectar un valor de vuelta en ese mismo punto. Saga explota ese canal de doble sentido sin piedad: la saga rinde una descripción de efecto hacia el middleware, el middleware ejecuta el efecto y reanuda la saga con el resultado. Por eso const datos = yield call(api.getUsuario, id) se lee como código bloqueante —“trae los datos y sigue”— cuando en realidad es una pausa cooperativa: la saga se congela ahí hasta que el middleware le devuelve la respuesta.

La clave, y lo que la separa por completo del thunk, es que call(fn, ...args) no llama a fn: devuelve un objeto plano que significa “llama a fn con estos argumentos”. La saga jamás toca la red ni el store; solo fabrica descripciones. Es el patrón interpreter de la programación funcional —el mismo espíritu de la free monad—: se separa el qué —una estructura de datos que declara la intención— del cómo —un intérprete que la lleva a cabo—. La saga es casi pura: toda la impureza vive en el middleware que interpreta sus yield. Este reparto es el corazón conceptual de la librería, y todo lo demás son variantes de efecto.

Ese desacople entre describir y ejecutar es también la razón de que saga inspirara al listener middleware de la próxima lección. Una vez ves los efectos como valores, codicias su vocabulario —take, race, fork, la cancelación cooperativa— aunque no siempre quieras pagar los generadores ni la indirección de la reificación. El listener nace precisamente de esa tensión: conservar la potencia de coordinación de saga soltando su maquinaria más cara. Entender saga a fondo, por tanto, no es solo aprender una librería más, sino ver de dónde viene el diseño de su relevo.

El patrón watcher/worker

La unidad de organización de saga es la pareja vigía-obrero. Un watcher escucha tipos de acción y, cuando llega uno, engendra una saga worker que hace el trabajo. Con takeEvery arrancas un obrero por cada acción, concurrentes; con takeLatest cancelas al obrero en vuelo en cuanto llega otra acción del mismo tipo. Ese takeLatest es, en una palabra, el “quédate solo con la última” que en la lección de thunk costaba banderas, refs y contadores: aquí la semántica de cancelación es vocabulario, no contabilidad manual.

import { call, put, takeLatest } from "redux-saga/effects";
import { api } from "./api";

function* cargarUsuario(accion: { type: string; payload: string }) {
  try {
    const datos: { nombre: string } = yield call(api.getUsuario, accion.payload);
    yield put({ type: "usuario/exito", payload: datos }); // put: describe un dispatch
  } catch (e) {
    yield put({ type: "usuario/error", payload: String(e) });
  }
}

export function* watcherUsuario() {
  // takeLatest cancela el worker anterior si llega otra peticion
  yield takeLatest("usuario/pedir", cargarUsuario);
}

flowchart TD
W[watcher escucha usuario/pedir] -->|llega accion| A[arranca worker A]
W -->|llega otra accion| C[cancela worker A]
C --> B[arranca worker B]
A --> P[put exito o error]
B --> P
style C fill:#f38ba8,color:#11111b
style P fill:#a6e3a1,color:#11111b

Orquestar lo complejo: race, take, cancel

Donde saga se separa de todo lo anterior es en los efectos de control de flujo. race corre varios efectos a la vez y se queda con el primero que termine, cancelando al resto: un timeout es literalmente una carrera entre la respuesta y un delay. take pausa la saga hasta que llegue una acción concreta, lo que permite escribir secuencias y handshakes como código en línea recta —“abre el diálogo, ahora espera a que confirmen, luego actúa”—. fork lanza una saga hija no bloqueante, cancel la interrumpe y un finally con cancelled() deja que el obrero limpie tras de sí cuando lo cancelan. Procesos de vida larga —un bucle de websocket, un asistente de varios pasos— se vuelven procedimientos legibles en lugar de una maraña de callbacks.

import { call, put, race, delay, take } from "redux-saga/effects";
import { api } from "./api";

function* cargarConTimeout(id: string) {
  // race: corre ambos y gana el primero; el perdedor se cancela solo
  const { datos, timeout } = yield race({
    datos: call(api.getUsuario, id),
    timeout: delay(5000),
  });
  yield put(timeout ? { type: "usuario/timeout" } : { type: "usuario/exito", payload: datos });
}

function* flujoConfirmacion() {
  yield put({ type: "dialogo/abrir" });
  // take: pausa hasta que llegue exactamente una de estas acciones
  const respuesta: { type: string } = yield take(["dialogo/aceptar", "dialogo/cancelar"]);
  if (respuesta.type === "dialogo/aceptar") yield call(api.confirmar);
}

Conviene distinguir dos familias de efecto por su bloqueo. call y take son bloqueantes: la saga se detiene hasta que se resuelven. fork es no bloqueante: lanza una saga hija y sigue de inmediato, devolviendo una tarea que más tarde puedes cancel. Sobre fork se levanta la concurrencia estructurada de saga, y en particular la root saga: el único punto de arranque que el middleware ejecuta, y que bifurca todos tus watchers a la vez con all, de modo que escuchan en paralelo sin bloquearse entre sí.

import { all, fork } from "redux-saga/effects";
import { watcherUsuario } from "./usuario";
import { watcherBusqueda } from "./busqueda";

// La root saga: un unico arranque que bifurca todos los watchers en paralelo.
export function* rootSaga() {
  yield all([fork(watcherUsuario), fork(watcherBusqueda)]);
}