Открийте какво представляват Sagas и как те могат да ви помогнат да пишете по-стабилен и гъвкав код.
React и Redux са популярни инструменти за уеб разработка за управление на състоянието и разработване на динамични потребителски интерфейси.
Достъпът до информация може да бъде труден и да отнеме много време, особено когато се работи с асинхронни събития. Redux-Saga, лесен за използване междинен пакет, който управлява асинхронни дейности, може да опрости този процес.
Научете как React да създаде приложение, което извлича данни от Redux-Saga.
Разбиране на Redux-Saga
Redux-Saga е междинен пакет, който улеснява управлението и тестването на странични ефекти като достъп до хранилището на браузъра и асинхронни API заявки. Използването на генераторни функции прави асинхронния код да изглежда синхронен, което улеснява разсъжденията и отстраняването на грешки.
Redux-Saga работи, като търси конкретни Redux действия и задейства Sagas, които са функции за генериране на странични ефекти. Sagas може да изпълнява асинхронни операции, като например получаване на данни от API, и след това да изпрати ново Redux действие за актуализиране на състоянието.
Вземете примера с използването на Redux-Saga за управление на асинхронни API извиквания. Започнете със създаване на Redux действие, което инициира процедурата за събиране на данни:
износконст FETCH_DATA = „FETCH_DATA“;
износконст fetchData = (параметри) => ({
тип: FETCH_DATA,
полезен товар: параметри,
});
Полезният товар на действието, FETCH_DATA, включва всички основни параметри, като крайната точка на API и параметрите на заявката.
След това дефинирайте Saga, която слуша за дейността FETCH_DATA и извършва събирането на данни:
импортиране { call, put, takeLatest } от„redux-saga/effects“;
импортиране аксиос от"аксиос";износфункция* fetchDataSaga(действие) {
опитвам {
конст отговор = добив повикване (axios.get, action.payload.endpoint, {
параметри: action.payload.params,
});добив слагам({ Тип: „FETCH_DATA_SUCCESS“, полезен товар: response.data });
} улов (грешка) {
добив слагам({ Тип: „FETCH_DATA_ERROR“, полезен товар: грешка });
}
}
износфункция* watchFetchData() {
добив takeLatest (FETCH_DATA, fetchDataSaga);
}
Тази сага прави извикване на API към аксиос библиотека с помощта на обадете се ефект. След това изпраща извлечените данни като нов полезен товар за действие Redux с типа FETCH_DATA_SUCCESS. Ако възникне грешка, той изпраща ново действие Redux с обекта за грешка като полезен товар и тип FETCH_DATA_ERROR.
И накрая, трябва да регистрирате Saga в магазина Redux с помощта на мидълуера redux-saga:
импортиране { applyMiddleware, createStore } от'редукс';
импортиране createSagaMiddleware от„redux-сага“;
импортиране rootReducer от'./редуктори';
конст sagaMiddleware = createSagaMiddleware();
конст store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
Чрез регистриране на watchFetchData Сага с новия мидълуер на екземпляра, този код създава друг редукс-сага. Мидълуерът е настроен в магазина Redux с помощта на ApplyMiddleware.
Redux-Saga като цяло предоставя силен и многостранен подход за управление на асинхронни дейности в Redux на React приложения. Можете да рационализирате извличането на данни и да генерирате по-лесен код за тестване, поддържане и актуализиране, като използвате Sagas за контрол на грешки в кода.
Често срещани проблеми с извличането на данни в приложенията на React
Има няколко трудности, които разработчиците често срещат, докато използват извличането на данни от React. Ето няколко примера:
- Управление на асинхронни действия: Това е информация, предоставена от интерфейс за програмиране, който следи неедновременни операции, без да се намесва в потребителския интерфейс (UI). Работата с няколко API заявки или данни, които разчитат на други данни, може да направи това трудно.
- Обработване на грешки: извикванията на API може да се провалят и е жизненоважно да обработвате правилно тези грешки. Това включва предоставяне на съобщения за грешка на потребителя и позволяване на повторно подаване на заявката.
- Актуализиране на Redux store: Трябва да запазите информацията, получена от API в Redux store, така че други компоненти да имат достъп до нея. От решаващо значение е да актуализирате магазина, без да се намесвате или повреждате вече съществуващи данни.
Как да използвате Redux-Saga за извличане на данни в React
Използването на Redux-Saga за извличане на данни ви позволява да отделите логиката за извършване на API извиквания и работа с отговора от вашите React компоненти. В резултат на това можете да се съсредоточите върху изобразяването на данните и реагирането на потребителските взаимодействия, докато Sagas обработва асинхронно извличане на данни и управление на грешки.
Трябва да регистрирате watchFetchData Сага с Redux-Saga междинен софтуер за използване на Sagas в нашия магазин Redux:
// src/store.js
импортиране { createStore, applyMiddleware } от'редукс';
импортиране createSagaMiddleware от„redux-сага“;
импортиране rootReducer от'./редуктори';
импортиране { watchFetchData } от'./sagas/dataSaga';конст sagaMiddleware = createSagaMiddleware();
конст store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
износпо подразбиране магазин;
Този код регистрира sagaMiddleware с магазина Redux с помощта на applyMiddleware функция и createSagaMiddleware метод на редукс-сага пакет. След това, използвайки тичам метод, той изпълнява watchFetchData Сага.
Вашата настройка на Redux-Saga е завършена, след като всеки компонент е на мястото си. Сагата използва fetchDataApi функция за извличане на данните, когато вашият React компонент изпрати действието FETCH_DATA_REQUEST. Ако планираното извличане на данни е успешно, то изпраща друга дейност с извлечените данни. Ако има грешка, той изпраща ново действие с обекта за грешка.
// src/components/DataComponent.jsимпортиране Реагирайте, {useEffect} от"реагира";
импортиране {useDispatch, useSelector} от'react-redux';
импортиране {fetchDataRequest} от'../actions/dataActions';конст DataComponent = () => {
конст изпращане = useDispatch();
конст { данни, isLoading, грешка } = useSelector((състояние) => състояние.данни);useEffect(() => {
изпращане (fetchDataRequest({ param1: 'стойност1', параметър2: 'стойност2' }));
}, [изпращане]);ако (isLoading) {
връщане<див>Зареждане...див>;
}ако (грешка) {
връщане<див>Грешка: {error.message}див>;
}връщане (
{data.map((вещ) => ({item.name}</div>
))}
</div>
);
};
износпо подразбиране DataComponent;
В примера по-горе вие използвате useSelector закачете вашия React компонент, за да получите данните, се зарежда, и грешка стойности от магазина Redux. Освен това изпращате действието FETCH_DATA_REQUEST, като използвате useEffect() кука когато компонентът се монтира. Вие изобразявате данните, съобщението за зареждане или съобщението за грешка в зависимост от данни стойности, се зарежда, и грешка.
Чрез използване на Redux-Saga за извличане на данни, управление на асинхронни API заявки в React приложение могат да бъдат значително рационализирани. Можете да създадете по-поддържаем и модулен код, като изолирате логиката на извикване на API от вашите компоненти и управлявате асинхронния поток в Sagas.
Най-добри практики за използване на Redux-Saga за извличане на данни
Следвайте тези най-добри практики, докато използвате Redux-Saga за извличане на данни:
- Използвайте отделни саги за всяка операция за извличане на данни. Препоръчително е да отделите Saga за всеки процес на извличане на данни, вместо да включвате цялата логика в една Saga. Поддържането и промяната на кода е по-лесно, тъй като можете веднага да намерите съответните саги за определени дейности.
- Използвайте вградената обработка на грешки на Redux-Saga. Можете да използвате блока try/catch на Redux-Saga за автоматично обработване на грешки. Това ни позволява да управляваме повреди централно и да предоставяме на потребителите еднообразни съобщения за грешки.
- Използвайте отменими саги за по-добро представяне. Когато използвате React компонент, той може да задейства много API извиквания. Състезателни ситуации и ненужни извиквания на програмен интерфейс може да са резултат от това задействане на API. Като отмените всички текущи извиквания на API, когато правите нова заявка, можете да предотвратите това.
- Използвайте най-актуалните данни. Когато правите няколко API заявки за едни и същи данни, е изключително важно да се гарантира, че те използват най-новите данни. Използвайки последен ефект, Redux-Saga ви помага да постигнете това. Ефектът гарантира, че използвате най-новите или най-новите API извиквания и отменя всички чакащи API заявки за същите данни.
- Използвайте отделен файл за саги. Трябва да съхранявате Sagas отделно от файла на магазина Redux. В резултат на това вашите саги ще бъдат по-лесни за контрол и тестване.
Извличане на данни с Redux-Saga
Redux-Saga предлага надежден и гъвкав метод за обработка на асинхронни задачи в React приложения. Използвайки Sagas, можете да създадете по-стабилен, тестван и гъвкав код, който разделя проблемите.
Извличането на данни може да бъде трудна и податлива на грешки операция, но можете да я опростите с помощта на Redux-Saga. Redux-Saga подобрява потребителското изживяване, като ви позволява да управлявате надеждно и предвидимо много асинхронни процеси.
Благодарение на многото си предимства и функции, Redux-Saga е фантастично допълнение към вашата колекция от инструменти за разработка на React.