Ներածություն Redux-ի thunks-ին

Նախորդ գլխում մենք կազմակերպեցինք սերվերի, տվյալների բազայի և կլիենտի աշխատանքը տվյալների փոխանակման համար: Այժմ մեզ անհրաժեշտ է կառուցել վերջին կամուրջը, որն օգնելու է մեր 'սինխրոն' կազմակերպված Redux հավելվածին փոխազդել ասինխրոն կլիենտի հետ, որը մենք ստեղծեցինք նախորդ գլխի վերջին դասին, հարցումներ ուղարկելու և անհրաժեշտ տվյալները պատասխանում ստանալու համար:

Ինչպես հիշում ենք նախորդ բաժնի առաջին դասերից, Redux-ը ոչինչ չգիտի ասինխրոն տրամաբանության հետ աշխատելու մասին, և դրա համար մենք կօգտագործենք thunk middleware: Այս middleware-ը թույլ է տալիս աշխատել ուղարկված actions-ների հետ, օգտագործել մեր thunk-ի կոդում dispatch և getState store-ի մեթոդները, ինչպես նաև օգնել dispatch մեթոդին աշխատել ոչ միայն սովորական JS օբյեկտների, այլև այնպիսի էությունների հետ, ինչպիսիք են ֆունկցիաները և պրոմիսները:

Սովորաբար thunk-ֆունկցիան կանչվում է երկու արգումենտով՝ dispatch և getState (անհրաժեշտության դեպքում), որոնցով կարելի է օգտվել այս ֆունկցիայի մարմնում: Դրա օգնությամբ կարելի է ուղարկել սովորական էքշններ: Նաև այն կարելի է ուղարկել store.dispatch-ի միջոցով: Նման ֆունկցիայի օրինակը բերված է ստորև.

jsxconst changeColorThunk = (dispatch, getState) => {
  const colorBefore = getState()
  console.log(`Հին գույնը: ${colorBefore.color}`)
  
  dispatch(changeColor())
  
  const colorAfter = getState()
  console.log(`Նոր գույնը: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Եկեք այժմ բացենք մեր ապրանքների հավելվածը: Առաջին բանը, որ մենք պետք է ստանանք սերվերից հավելվածը գործարկելիս, դա ապրանքների ցանկն է: Քանի որ սովորաբար thunks-ները գրվում են slice-ֆայլերում, ապա մենք կբացենք ֆայլը productsSlice.js:

Ուրախ լուրն այն է, որ մեզ պետք չ է զբաղվել Redux Thunk-ի տեղադրմամբ, քանի որ configureStore ֆունկցիան RTK-ից արդեն դա կանի մեզ համար: Ուստի պարզապես ավելացնենք createAsyncThunk իմպորտը ֆայլում.

products/productsSlice.jsimport { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

Նաև ավելացնենք իմպորտում մեր կլիենտը.

products/productsSlice.jsimport { client } from '../../api/client'

Եվ այժմ createAsyncThunk-ի օգնությամբ ստեղծենք մեր առաջին thunk-ը ապրանքները ստանալու համար, դա անենք անմիջապես initialState օբյեկտի հայտարարումից հետո.

products/productsSlice.jsexport const fetchProducts = createAsyncThunk()

createAsyncThunk-ի առաջին պարամետրը կընդունի տող գեներացվող էքշնի տիպի համար, իսկ երկրորդը՝ payload-ի համար նախատեսված callback-ֆունկցիան, որը արդյունքում կվերադարձնի կամ տվյալներ, կամ սխալով պրոմիս (տեսեք ֆայլը client.js): Ֆունկցիայի կոդում մենք կանչում ենք client.get և փոխանցում ենք դրան ուղին, որը մենք նշեցինք սերվերում (նայեք ընդունվող պարամետրերը http.get-ի server.js-ում).

products/productsSlice.jsexport const fetchProducts = createAsyncThunk(
  'products/fetchProducts',
  async () => {
    const response = await client.get('/fakeServer/products')
    return response.data
  }
)