Datudveksling mellem Redux-applikation og server

Dette afsnit vil være for de kræsne elever, der ikke stoppede op med det opnåede i Redux og besluttede at gå hele vejen gennem denne vejledning. I de næste to afsnit vil vi behandle arbejdet i en Redux-applikation med asynkron logik, forbinde vores applikation med backend og lære den at udveksle data med den.

Fra tidligere afsnit ved vi, at driften af en Redux-applikation er baseret på en synkron mekanisme. De vigtigste faser i arbejdet består i at sende actions, når en hændelse opstår i applikationen, derefter opdatere tilstanden i storet med reducer-funktionen, underrette applikationens komponenter om ændringen i tilstanden og følgelig vise den nye tilstandsværdi i komponenterne.

I det virkelige liv sker det ofte, at en applikation har brug for asynkron logik, for eksempel når den arbejder med HTTP API-anmodninger og modtagelse af data fra en ekstern server. Derfor, for at vores 'synkrone' Redux store kan arbejde med sådan asynkron logik, bruges såkaldt middlware - software, der fungerer som mellemled eller forbindelse mellem vores applikations store og, for eksempel, en server, som vi begynder at arbejde med i dette kapitel i vejledningen.

Der er skabt mange sådanne middlewares til Redux, men den mest udbredte blandt dem og stadigvæk officielt anbefalet til Redux-applikationers arbejde med asynkron logik er Redux Thunk. Dette software hjælper os med at bruge almindelige funktioner (eller thunks), som kan indeholde asynkron logik, såsom setTimeout, Promises, async/await, for at interagere med vores store. Hvad angår selve udtrykket, er en thunk kode, der udfører noget udsat arbejde.

Nu, hvor vi er blevet lidt bekendt med, hvordan vi arbejder med asynkron logik i Redux, kan vi gå i gang med implementeringen af denne fase i vores applikation. Vi er nødt til at sørge for, at vores applikation kan interagere med en ekstern server, modtage data fra den og sende data til den. Med andre ord venter et spændende og meget vigtigt emne foran os. Lad os komme i gang.