Како дохватити податке у Реацт-у помоћу упита за Редук Тоолкит

Реацт је популарна ЈаваСцрипт библиотека за прављење корисничких интерфејса за веб апликације. Када правите апликацију, важно је размотрити ефикасан приступ управљању подацима како бисте осигурали да преузимате и приказујете податке у претраживачу на одговарајући начин, као одговор на интеракције корисника.

Међутим, управљање овим процесом наизглед може постати заморан задатак и подложан грешкама, посебно ако преузимате податке из више извора и морате доследно да ажурирате бројна стања. У таквим случајевима, Редук Тоолкит Куери пружа ефикасно решење.

Упит за Редук Тоолкит (РТК Куери) је алатка за преузимање података изграђена на врху Редук Тоолкита. Његова званична документација описује РТК Куери као „моћан алат за преузимање и кеширање података дизајниран да поједностави уобичајени случајеви за учитавање података у веб апликацију, елиминишући потребу да се ручно пише логика преузимања и кеширања података себе“.

У суштини, пружа скуп функција и могућности које поједностављују процес преузимања и управљања подацима из АПИ-ја или било ког другог извора података из Реацт апликације.

Иако постоје сличности између упита за Редук Тоолкит и Реацт Куери-а, једна од главних предности Редук Тоолкит Куери-а је његова беспрекорна интеграција са Редук, библиотека за управљање државом, омогућавајући комплетно решење за преузимање података и управљање стањем за Реацт апликације када се користе заједно.

Неке од основних карактеристика РТК-а укључују кеширање података, функцију управљања упитима и руковање грешкама.

Да бисте започели, можете брзо да покренете Реацт пројекат локално користећи Креирајте Реацт апликацију команда.

мкдир Реацт-РТК
ЦД Реацт-РТК
нпк цреате-реацт-апп реацт-ртк-екампле
цд реацт-ртк-екампле 
нпм старт

Алтернативно, можете поставите Реацт пројекат користећи Вите, нови алат за прављење и развојни сервер за веб апликације.

Овде можете пронаћи код овог пројекта ГитХуб спремиште.

Инсталирајте потребне зависности

Када покренете свој Реацт пројекат, наставите и инсталирајте следеће пакете.

нпм инсталл @редукјс/тоолкит реацт-редук

Дефинишите АПИ исечак

АПИ исечак је компонента која укључује неопходну Редук логику за интеграцију и интеракцију са одређеним АПИ крајњим тачкама. Пружа стандардизован начин за дефинисање крајњих тачака упита за преузимање података и крајњих тачака мутације за модификацију података.

У суштини, АПИ исечак вам омогућава да дефинишете крајње тачке за тражење и уношење промена у податке из одређеног извора, пружајући поједностављен приступ интеграцији са АПИ-јима.

У срц директоријум, креирајте нови фолдер и дајте му име, Карактеристике. Унутар ове фасцикле направите нову датотеку: апиСлице.јс, и додајте код испод:

увоз { цреатеАпи, фетцхБасеКуери } из"@редукјс/тоолкит/куери/реацт";
извозконст продуцтсАпи = цреатеАпи({
 пут редуктора: "продуцтсАп",
 басеКуери: фетцхБасеКуери({ басеУрл: " https://dummyjson.com/" }),
 крајње тачке: (градитељ) => ({
 гетАллПродуцтс: буилдер.куери({
 упит: () =>"производи",
 }),
 гетПродуцт: буилдер.куери({
 упит: (производ) =>`производи/претрага? к=${продуцт}`, 
 }),
 }),
});
извозконст { усеГетАллПродуцтсКуери, усеГетПродуцтКуери } = продуцтсАпи;

Овај код дефинише АПИ исечак под називом продуцтсАпи користећи Редук Тоолкит цреатеАпи функција. АПИ исечак има следећа својства:

• А редурПатх својство - поставља име редуктора у Редук продавници.
• Тхе басеКуери својство - специфицира основни УРЛ за све АПИ захтеве који користе фетцхБасеКуери функцију коју обезбеђује Редук Тоолкит.
• АПИ крајње тачке - наведите доступне крајње тачке за овај АПИ исечак користећи градитељ објекат. У овом случају, код дефинише две крајње тачке.

Коначно, две куке се генеришу из продуцтсАПИ објекат који идентификује две крајње тачке. Можете да користите ове куке у различитим Реацт компонентама да правите АПИ захтеве, преузимате податке и мењате стање као одговор на интеракцију корисника.

Овај приступ поједностављује управљање стањем и преузимање података у Реацт апликацији.

Конфигуришите Редук Сторе

Након преузимања података из АПИ-ја, РТК Куери кешира податке у Редук продавници. Продавница, у овом случају, служи као централно чвориште за управљање стањем АПИ захтева направљених из Реацт-а апликација, укључујући податке преузете из тих АПИ захтева који обезбеђују приступ компонентама и ажурирање ових података као потребна.

У директоријуму срц креирајте а сторе.јс датотеку и додајте следеће линије кода:

увоз { цонфигуреСторе } из„@редукјс/тоолкит“;
увоз { продуцтсАпи } из"./феатурес/апиСлице";
извозконст сторе = цонфигуреСторе({
 редуктор: {
 [продуцтсАпи.редуцерПатх]: продуцтсАпи.редуцер,
 },
 средњи софтвер: (гетДефаултМиддлеваре) =>
 гетДефаултМиддлеваре().цонцат (продуцтсАпи.миддлеваре),
});

Овај код креира нову Редук продавницу, са два главна дела конфигурације:

1. Редуцер: Ово дефинише како продавница треба да обрађује ажурирања стања. У овом случају, продуцтсАпи.редуцер се прослеђује као функција редуктора и добија јединствени кључ редукторпатх да га идентификује у оквиру укупног стања продавнице.
2. Миддлеваре: Ово дефинише сваки додатни средњи софтвер који треба да се односи на продавницу.

Резултати продавница објекат је потпуно конфигурисана Редук продавница, која се може користити за управљање стањем апликације.

Конфигурисањем продавнице на овај начин, апликација може лако да управља стањем АПИ захтева и да обрађује њихове резултате на стандардизован начин користећи Редук Тоолкит.

Креирајте компоненту за имплементацију РТК функционалности

У директоријуму срц креирајте нови компоненте фолдер са новом датотеком унутра: Дата.јс.

Додајте овај код у датотеку Дата.јс:

увоз { усеГетАллПродуцтсКуери } из"../феатурес/апиСлице";
увоз Реагујте, { усеСтате } из"реаговати";
увоз"./продуцт.цомпонент.цсс";
извозконст Подаци = () => {
конст { дата, еррор, исЛоадинг, рефетцх } = усеГетАллПродуцтсКуери();
конст [продуцтсДата, сетПродуцтсДата] = усеСтате([]);
конст хандлеДисплаиДата = () => {
 рефетцх();
 сетПродуцтсДата (дата?.продуцтс);
 };
повратак (
"контејнер производа">
"дугме производа" онЦлицк={хандлеДисплаиДата}>
 Прикажи податке
 </button>
 {исЛоадинг && <див>Учитавање...див>}
 {грешка && <див>Грешка: {еррор.мессаге}див>}
"ознака производа">Производи:</label>
 {продуцтсДата && продуцтсДата.ленгтх > 0 && (


 {продуцтсДата.слице(0, 4).Мапа((производ) => (
"детаљи о производу" кеи={продуцт.ид}>
Назив: {продуцт.титле}</p>

Опис: {продуцт.десцриптион}</p>

Цена: {продуцт.прице}</p>
 </li>
 ))}
 </ul>
 )}
 </div>
 );
};

Овај код демонстрира Реацт компоненту која користи закачицу усеГетАллПродуцтсКуери коју обезбеђује АПИ пресек за преузимање података са наведене крајње тачке АПИ-ја.

Када корисник кликне на дугме Прикажи податке, функција хандлеДисплаиДата се извршава, шаљући ХТТП захтев АПИ-ју за преузимање података о производу. Када се добије одговор, варијабла података о производима се ажурира подацима одговора. Коначно, компонента приказује листу детаља о производу.

Ажурирајте компоненту апликације

Направите следеће промене у коду у датотеци Апп.јс:

увоз"./Апп.цсс";
увоз { Подаци } из"./цомпонентс/Дата";
увоз { продавница} из"./продавница";
увоз { Провајдер } из"реаговати-редукс";
увоз { АпиПровидер } из"@редукјс/тоолкит/куери/реацт";
увоз { продуцтсАпи } из"./феатурес/апиСлице";
функцијаАпликација() {
повратак (


"Апликација">

 </div>
 </ApiProvider>
 </Provider>
 );
}
извозУобичајено Апликација;

Овај код обавија компоненту података са два провајдера. Ова два провајдера дају компоненти приступ Редук продавници и РТК Куери функцијама омогућавајући јој да преузме и прикаже податке из АПИ-ја.

Лако је конфигурисати упит за Редук Тоолкит да ефикасно преузима податке из одређеног извора са минималним кодом. Штавише, такође можете да уградите функције за модификацију ускладиштених података дефинисањем крајњих тачака мутације у компоненти АПИ пресека.

Комбиновањем карактеристика Редук-а са РТК-овим способностима преузимања података, можете добити свеобухватно решење за управљање стањем за ваше Реацт веб апликације.