Datautbyte mellan Redux-applikationen och servern

Det här avsnittet är för de kräsna eleverna, som inte nöjde sig med vad de uppnått i Redux och beslutade sig för att gå hela vägen genom denna handledning. I de följande två avsnitten kommer vi att beröra hur en Redux-applikation arbetar med asynkron logik, koppla vår applikation till serverdelen och lära den att utbyta data med den.

Från tidigare avsnitt vet vi att grunden för en Redux-applikations funktion är en synkron mekanism. De huvudsakliga stegen innebär att skicka actions när någon händelse inträffar i applikationen, sedan uppdatera state i store med hjälp av en reducer-funktion, meddela applikationens komponenter om state-förändringen och följaktligen visa det nya state-värdet i komponenterna.

I verkliga livet händer det ofta att en applikation behöver asynkron logik också, till exempel när man arbetar med HTTP API-förfrågningar och hämtar data från någon extern server. Därför, för att vår 'synkrona' Redux store skall kunna arbeta med sådan asynkron logik, används så kallad middleware - programvara som fungerar som en mellanhand eller koppling mellan vår applikations store och, till exempel, servern, som vi börjar arbeta med i detta kapitel av handledningen.

För Redux har det skapats många sådana middleware, men den mest utbredda bland dem och som fortfarande officiellt rekommenderas för Redux-applikationer som arbetar med asynkron logik är Redux Thunk. Denna programvara hjälper oss att använda vanliga funktioner (eller thunks), som kan innehålla asynkron logik, såsom setTimeout, Promises, async/await, för att interagera med vår store. När det gäller själva termen, en thunk är kod som utför något fördröjt arbete.

Nu när vi har lärt känna lite hur vi kan arbeta med asynkron logik i Redux, kan vi börja implementera detta steg i vår applikation. Vi måste se till att vår applikation kan interagera med någon extern server, ta emot data från den och skicka data till den. Med andra ord väntar ett spännande och mycket viktigt ämne framför oss. Låt oss börja.