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.