Տվյալների փոխանակում Redux հավելվածի և սերվերի միջև

Այս բաժինը կլինի փորձառու ուսանողների համար, ովքեր չեն կանգնել ձեռք բերվածի վրա Redux-ում և որոշել են հասնել մինչև այս ձեռնարկի ավարտը։ Հաջորդ երկու բաժիններում մենք կանդրադառնանք Redux հավելվածի աշխատանքին ասինխրոն տրամաբանությամբ, կկապենք մեր հավելվածը սերվերի հետ և կսովորեցնենք այն տվյալներ փոխանակել դրա հետ։

Նախորդ բաժիններից մենք գիտենք, որ Redux հավելվածի աշխատանքի հիմքում դրված է սինխրոն մեխանիզմը։ Աշխատանքի հիմնական փուլերը ներառում են action-ների ուղարկում հավելվածում ինչ-որ իրադարձության առաջացման դեպքում, ապա store-ում state-ի թարմացում reducer ֆունկցիայի կողմից, հավելվածի component-ներին state-ի փոփոխության մասին ծանուցում և, համապատասխանաբար, state-ի նոր արժեքի ցուցադրում component-ներում։

Իրական կյանքում հաճախ է պատահում, որ հավելվածին անհրաժեշտ է նաև ասինխրոն տրամաբանություն, օրինակ՝ HTTP API հարցումների հետ աշխատելիս և տվյալներ ստանալիս ինչ-որ արտաքին սերվերից։ Ուստի, որպեսզի մեր 'սինխրոն' Redux store-ը կարողանա աշխատել այդպիսի ասինխրոն տրամաբանության հետ, օգտագործվում է այսպես կոչված middlware - ծրագրային ապահովում, որը հանդես է գալիս որպես միջնորդ կամ կապող օղակ մեր հավելվածի store-ի և, օրինակ, սերվերի միջև, որի հետ մենք կսկսենք աշխատել այս ձեռնարկի գլխում։

Redux-ի համար ստեղծվել են բազմաթիվ այդպիսի middleware-ներ, սակայն դրանցից առավել տարածվածը և պաշտոնապես առաջարկվողը Redux հավելվածների կողմից ասինխրոն տրամաբանության հետ աշխատելիս մինչ օրս մնում է Redux Thunk-ը։ Այս ծրագրային ապահովումը օգնում է մեզ օգտագործել սովորական ֆունկցիաներ (կամ thunk-ներ), որոնք կարող են պարունակել նրանց ներսում ասինխրոն տրամաբանություն, ինչպիսիք են setTimeout, Promises, async/await, մեր store-ի հետ փոխազդեցության համար։ Ինչ վերաբերում է հենց տերմինին, thunk-ը կոդ է, որն կատարում է ինչ-որ հետաձգված աշխատանք։

Այժմ, երբ մենք մի փոքր ծանոթացանք նրան, թե ինչպես կարող ենք աշխատել Redux-ում ասինխրոն տրամաբանության հետ, մենք կարող ենք անցնել այս փուլի իրականացմանը մեր հավելվածում։ Մենք պետք է անենք այնպես, որ մեր հավելվածը կարողանա փոխազդել ինչ-որ արտաքին սերվերի հետ, ընդունելով դրանից տվյալներ և փոխանցելով նրան տվյալներ։ Այլ կերպ ասած, մեր առջև սպասվում է հետաքրքիր և շատ կարևոր թեմա։ Սկսենք։