Estoy tratando de implementar una saga muy sencilla para un punto final PUT que actualiza un objeto.
export const updateSemester = (semesterId: string, updatedSemester: any) => axios.put(SEMESTERS_URL + semesterId, updatedSemester); export function* handleUpdateSemester(action: UpdateSemesterActionType) { const { semester, onSuccess } = action.payload; // It hangs here waiting for the response (as expected) const response = yield call(updateSemester, semester.id, removeNullFields(semester)); if (response.status < 300 && response.status >= 200) { yield put(updateSemesterSuccess({ semester: response.data.data, })); onSuccess && onSuccess(response.data.data); } } export function* watchUpdateSemester() { // handleError just wraps it in a try-catch and `put(ERROR, {error})` when applicable yield takeEvery(UPDATE_SEMESTER, handleError(setGlobalError, handleUpdateSemester)); } export default function* semestersSaga() { yield all([ // Others ... watchUpdateSemester(), // Others ... ]); } /** Root Saga File **/ export default function* rootSaga() { yield all([ // Others ... semestersSaga(), // Others ... ]); }Después de actualizar el objeto, la nueva representación incluye una animación simple de CSS. Sin embargo, la animación es lenta y "salta". Abrí el perfilador de rendimiento y vi lo siguiente:
Gráfico de cascada con seguimiento de pila
Aquí se ejecutan varios efectos de call , por lo que el seguimiento de la pila no es muy claro, pero supuse que el único que tiene ese tipo de latencia es la llamada realizada a mi API externa.
Cambiar esa call a una fork o simplemente no usar un efecto de saga y proporcionar una devolución de llamada como updateSemester(semester.id, semester).then((response) => {...}) elimina la latencia de renderizado. El único problema es que no puede poner un generador de funciones en una devolución de llamada, lo que significa que no puedo put(updateSemesterSuccess({semester: response.data.data})); después de que la solicitud regrese.
Esta latencia es muy extraña para mí, pensé que el propósito completo de los generadores de funciones era mitigar este problema exacto. ¿Me estoy perdiendo de algo? Preferiría mantener esta saga lo más simple posible dado que es solo una simple solicitud PUT . ¡Gracias!