redux saga - react - ¿Cuál es la forma idiomática de iniciar rootSaga?

redux saga tutorial

Question

El proyecto redux-saga existe desde hace bastante tiempo, pero todavía hay muchas cosas confusas sobre esta biblioteca. Y uno de ellos es: cómo iniciar tu rootSaga. Por ejemplo, en el tutorial para principiantes, rootSaga se inicia al construir una serie de sagas. Me gusta esto

export default function* rootSaga() {
yield [
helloSaga(),
watchIncrementAsync()
]
}

Sin embargo, en la sección de ayuda de la saga usando rootSaga consiste en dos sagas bifurcadas. Me gusta esto:

export default function* rootSaga() {
yield fork(watchFetchUsers)
yield fork(watchCreateUser)
}

La misma forma de iniciar rootSaga se usa en un ejemplo asíncrono en redux-saga repo. Sin embargo, si verificas ejemplos del mundo real y de la tarjeta de compras, verás que rootSagas allí crea una serie de sagas bifurcadas. Me gusta esto:

export default function* root() {
yield [
fork(getAllProducts),
fork(watchGetProducts),
fork(watchCheckout)
]
}

Además, si lees algunas discusiones sobre problemas de redux-saga, verás que algunas personas sugieren usar engendro en lugar de fork para que rootSaga proteja tu aplicación de un bloqueo completo si una de tus sagas bifurcadas se cancela debido a alguna excepción no controlada.

Entonces, ¿de qué manera es la manera más correcta de iniciar tu rootSaga? ¿Y cuáles son las diferencias entre las existentes?

Answer 1

¿Cómo crear rootSaga?

De acuerdo con un desarrollador central de redux-saga [1 , 2] la forma idiomática de crear rootSaga es utilizar todo el Combinador de efectos . Además, tenga en cuenta que la producción de matrices de sagas [1 .

Ejemplo 1

Podrías usar algo como this (+ todo)

import { fork, all } from ''redux-saga/effects'';
import firstSaga from ''./firstSaga'';
import secondSaga from ''./secondSaga'';
import thirdSaga from ''./thirdSaga'';
export default function* rootSaga() {
yield all([
fork(firstSaga),
fork(secondSaga),
fork(thirdSaga),
]);
}

Ejemplo 2

2]

// foo.js
import { takeEvery } from ''redux-saga/effects'';
export const fooSagas = [
takeEvery("FOO_A", fooASaga),
takeEvery("FOO_B", fooBSaga),
]
// bar.js
import { takeEvery } from ''redux-saga/effects'';
export const barSagas = [
takeEvery("BAR_A", barASaga),
takeEvery("BAR_B", barBSaga),
];
// index.js
import { fooSagas } from ''./foo'';
import { barSagas } from ''./bar'';
export default function* rootSaga() {
yield all([
...fooSagas,
...barSagas
])
}

tenedor contra engendro

fork y spawn devolverán ambos objetos de Task . Las tareas bifurcadas se adjuntan al padre, mientras que las tareas generadas se separan del padre.

• Manejo de errores en las horquillas [ fork ]:

  Los errores de las tareas de los niños se propagan automáticamente a sus padres . Si cualquier tarea bifurcada genera un error no capturado, entonces la tarea principal se abortará con el Error secundario , y se cancelará todo el árbol de ejecución de los Padres (es decir, las tareas bifurcadas + la tarea principal representada por el cuerpo de los padres) .

• Manejo de errores en tareas generadas [ spawn ]:

  El padre no esperará a que terminen las tareas separadas antes de regresar y todos los eventos que puedan afectar al padre o la tarea separada son completamente independientes ( error , cancelación).

Basado en lo anterior, puede usar la bifurcación para tareas "de misión crítica", es decir , "si esta tarea falla, cuelgue toda la aplicación", y generar tareas "no críticas", es decir , "si esta tarea falla, no propague el error al padre ".

Answer 2

Puede iniciar múltiples sagas raíz. Pero cualquier saga tiene la capacidad de comenzar otra saga por sí misma. Por lo tanto, es posible iniciar una saga raíz única, que crea las otras sagas.

Solo debes ser consciente de cómo se propagan los errores a la saga principal. Si tienes una saga raíz única y una saga secundaria se estrelló, de forma predeterminada, el error se propagará al padre, que terminará, lo que también matará a todas las otras sagas que se hayan iniciado desde este padre.

Depende de usted decidir este comportamiento. De acuerdo con su aplicación, es posible que desee tener un comportamiento rápido de falla (haga que toda la aplicación sea inutilizable si existe algún problema), o falle, e intente que la aplicación continúe funcionando, incluso si algunas partes pueden tener problemas.

En general, te recomiendo que comiences con varias sagas de raíz, o la saga de tu padre usa spawn lugar de fork para que tu aplicación se pueda usar si se produce un bloqueo. Tenga en cuenta que también es bastante fácil olvidarse de detectar errores en algunos lugares. Por lo general, no desea, por ejemplo, que toda su aplicación se vuelva inutilizable si hay una sola solicitud de API que falla

Edición : recomiendo echar un vistazo a https://github.com/yelouafi/redux-saga/issues/570

En esta edición de la saga de redux , muestro diferentes formas de iniciar sagas y el impacto que tiene en tu aplicación.

TLDR : así es como usualmente comienzo sagas raíz:

const makeRestartable = (saga) => {
return function* () {
yield spawn(function* () {
while (true) {
try {
yield call(saga);
console.error("unexpected root saga termination. The root sagas are supposed to be sagas that live during the whole app lifetime!",saga);
} catch (e) {
console.error("Saga error, the saga will be restarted",e);
}
yield delay(1000); // Workaround to avoid infinite error loops
}
})
};
};
const rootSagas = [
domain1saga,
domain2saga,
domain3saga,
].map(makeRestartable);
export default function* root() {
yield rootSagas.map(saga => call(saga));
}