Blog

Diferenciar dispatch de redux-saga-routines

Diferenciar dispatch de redux-saga-routines

Tengo un código en el que se utiliza redux-saga y redux-saga-routines. Veamos:

// routines.js
import { createRoutine } from "redux-saga-routines";

export const doSomething = createRoutine("DO_SOMETHING");

Se utiliza en un componente:

// componente.js

import { doSomething } from "../routines";

export const MyComponent = ({
  doSomething,
}) => {
 // muchas cosas, al final se acaba llamando a doSomething()
};


const mapDispatchToProps = {
  doSomething,
};

export default connect(
  null,
  mapDispatchToProps
)(MyComponent);

El nombre de la rutina es el mismo que el del dispatch. Dentro de MyComponent toma precedencia el que se pasa en los props. Tuve un problema: se me olvidó poner doSomething «dispatch» en los props, y no se llamaba a la saga (la tengo en otro fichero, doSomethingSaga). Tardé en darme cuenta porque se estaba tomando el nombre de la rutina situada arriba como variable global. Lo entendí al hacer un console.log:

console.log(doSomething) dentro de MyComponent, sin poner doSomething en los props. Se muestra la función actionCreator:

ƒ actionCreator() {
  var payload = finalPayloadCreator.apply(void 0, arguments);
  var action = {
    type: type
  };

  if (payload instanceof Error) {
    action.error = true;
  }

 …

// Haciendo click en la consola de Chrome me lleva al código
// de node_modules/redux-actions/es/createAction.js:

var actionCreator = function actionCreator() {
  var payload = finalPayloadCreator.apply(void 0, arguments);
  var action = {
    type: type
  };

  if (payload instanceof Error) {
    action.error = true;
  }

  if (payload !== undefined) {
    action.payload = payload;
  }

  if (hasMeta) {
    action.meta = metaCreator.apply(void 0, arguments);
  }

  return action;
};

Añádiendo doSomething a los props ya sale el dispatch, que es lo correcto:

ƒ () {
  return dispatch(actionCreator.apply(void 0, arguments));
}

Un posible apaño para no equivocarse nunca podría ser añadir el sufijo Routine:

import { doSomething as doSomethingRoutine } from "../routines";

// [...]

const mapDispatchToProps = {
  doSomething: doSomethingRoutine,
};

De esta forma, si se nos olvida en los props, el IDE nos avisará de que la variable doSomething no está definida.