Estoy trabajando en un proyecto que involucra múltiples sagas y reductores. Algunas de las sagas utilizadas son similares, quiero reutilizar su lógica en varios componentes.
Implementación actual:
function* fetchUpComingMovies() { try { const res = yield call(getUpComingMovies); const { status, data } = res; if (status === 200 && data) { yield put(successGetUpComingMovies(res.data.results)); } } catch (error) { yield put(failureGetUpComingMovies(error?.message)); } } function* fetchCurrentShows() { try { const res = yield call(getOnTheAirShows); const { status, data } = res; if (status === 200 && data) { yield put(successGetCurrentShows(res.data.results)); } } catch (error) { yield put(failureGetCurrentShows(error?.message)); } } function* fetchTopRated({ payload }) { try { const res = yield call(getTopRated, payload); const { status, data } = res; if (status === 200 && data) { yield put(successGetTopRated(res.data.results)); } } catch (error) { yield put(failureGetTopRated(error?.message)); } } export default function* rootSaga() { yield all([ takeLatest(homeActionTypes.REQUEST_GET_UPCOMING_MOVIES, fetchUpComingMovies), takeLatest(homeActionTypes.REQUEST_GET_SHOWS, fetchCurrentShows), takeLatest(homeActionTypes.REQUEST_GET_TOP_RATED, fetchTopRated), ]);}Como puede ver, el código dentro del bloque try/catch es similar, solo que las acciones correspondientes son diferentes . Hay más sagas de este tipo en otros componentes. Siento que estoy repitiendo el código y quiero reutilizar la funcionalidad en todos los componentes. ¿Cómo resolver este problema?
Cualquier ayuda sería apreciada. Gracias
Puedes usar una fábrica de sagas para producir las sagas.
import { call, put, all, takeLatest } from 'redux-saga/effects'; // api const getUpComingMovies = () => []; const getOnTheAirShows = () => []; // action creator const successGetUpComingMovies = (payload) => ({ type: 'SUCCESS_GET_UP_COMING_MOVIES', payload }); const failureGetUpComingMovies = (payload) => ({ type: 'FAILURE_GET_UP_COMING_MOVIES', payload }); const successGetCurrentShows = (payload) => ({ type: 'SUCCESS_GET_CURRENT_SHOWS', payload }); const failureGetCurrentShows = (payload) => ({ type: 'FAILURE_GET_CURRENT_SHOWS', payload }); function sagaFactory(opts) { return function* saga(...args) { try { const res = yield call(opts.api, ...args); const { status, data } = res; if (status === 200 && data) { yield put(opts.successActionCreator(res.data.results)); } } catch (error) { yield put(opts.failureActionCreator(error?.message)); } }; } export default function* rootSaga() { yield all([ takeLatest( 'REQUEST_GET_UPCOMING_MOVIES', sagaFactory({ api: getUpComingMovies, successActionCreator: successGetUpComingMovies, failureActionCreator: failureGetUpComingMovies, }), ), takeLatest( 'REQUEST_GET_SHOWS', sagaFactory({ api: getOnTheAirShows, successActionCreator: successGetCurrentShows, failureActionCreator: failureGetCurrentShows, }), ), ]); }