Schimbul de date între aplicația Redux și server

Această secțiune va fi pentru elevii experimentați, care nu s-au oprit la ceea ce au realizat în Redux și au decis să ajungă până la capăt al acestui tutorial. În următoarele două secțiuni vom aborda funcționarea aplicației Redux cu logica asincronă, vom conecta aplicația noastră cu partea de server și o vom învăța să facă schimb de date cu ea.

Din secțiunile anterioare știm că în baza funcționării aplicației Redux stă un mecanism sincron. Etapele principale de funcționare constau în trimiterea acțiunilor atunci când apare un eveniment în aplicație, apoi actualizarea stării în store cu funcția-reducer, notificarea componentelor aplicației despre modificarea stării și, în mod corespunzător, afișarea noii valori a stării în componente.

În viața reală se întâmplă adesea ca aplicația să aibă nevoie și de logică asincronă, de exemplu atunci când lucrăm cu cereri HTTP API și obținem date de la un server extern. De aceea, pentru ca store-ul nostru 'sincron' Redux să poată funcționa cu o astfel de logică asincronă, se folosește așa-numitul middlware - software care este un intermediar sau o legătură între store-ul aplicației noastre și, de exemplu, serverul, cu care vom începe să lucrăm în acest capitol al tutorialului.

Pentru Redux au fost create multe astfel de middleware, însă cel mai răspândit dintre ele și recomandat oficial încă rămâne Redux Thunk. Acest software ne ajută să folosim funcții obisnuite (sau thunks), care pot conține logică asincronă, cum ar fi setTimeout, Promises, async/await, pentru interacțiunea cu store-ul nostru. În ceea ce privește terminologia, thunk este un cod care face o muncă întârziată.

Acum, că ne-am familiarizat puțin cu modul în care să lucrăm în Redux cu logica asincronă, putem trece la implementarea acestei etape în aplicația noastră. Trebuie să facem astfel încât aplicația noastră să poată interacționa cu un server extern, primind de la el și transmitându-i date. Cu alte cuvinte, înainte ne așteaptă o temă captivantă și foarte importantă. Să începem.