Redux හි thunks හැඳින්වීම

පෙර පරිච්ඡේදයේදී, අපි දත්ත හුවමාරු කිරීම සඳහා සේවාදායකය, දත්ත සමුදාය සහ අනුග්‍රාහකය සංවිධානය කළෙමු. දැන් අපගේ 'සමමුහූර්ත' සංවිධානය කරන ලද Redux යෙදුම පෙර පරිච්ඡේදයේ අන්තිම පාඩමේදී අපි සාදන ලද අසම්පාර්ශ්වික අනුග්‍රාහකය සමඟ අන්තර්ක්‍රියා කිරීමට, ඉල්ලීම් යැවීමට සහ ප්‍රතිචාරයේදී අවශ්‍ය දත්ත ලබා ගැනීමට උපකාර කරන අවසාන සේතුව තබා ගත යුතුය.

පෙර කොටසේ පළමු පාඩම් වලින් අපට මතක ඇති පරිදි, Redux අසම්පාර්ශ්වික තර්කය සමඟ වැඩ කිරීම ගැන කිසිවක් නොදනී සහ මේ සඳහා අපි thunk middleware භාවිතා කරන්නෙමු. මෙම middleware අපට යවන ලද actions සමඟ වැඩ කිරීමට, අපගේ thunk හි කේතයේදී store හි dispatch සහ getState ක්‍රම භාවිතා කිරීමට, සහ dispatch ක්‍රමයට සාමාන්‍ය JS වස්තූන් පමණක් නොව ශ්‍රිත සහ පොරොමිස (promises) වැනි ඇතිවල් සමඟද වැඩ කිරීමට උපකාර කරයි.

සාමාන්‍යයෙන් thunk-ශ්‍රිතය ක්‍රියා කරවනු ලබන්නේ dispatch සහ getState (අවශ්‍ය නම්) යන තර්ක දෙක සමඟිනි, මෙම තර්ක මෙම ශ්‍රිතයේ ශරීරය තුළ භාවිතා කළ හැකිය. එය භාවිතයෙන් සාමාන්‍ය actions යැවිය හැකිය. එය 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 ස්ථාපනය කිරීම සමඟ කලබල වීමට අවශ්‍ය නොවේ, මන්ද RTK වෙතින් configureStore ශ්‍රිතය එය අප වෙනුවෙන් දැනටමත් කර ඇත. එබැවින් සරලව අපි 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 හි පළමු පරාමිතිය වනුයේ සාදනු ලබන action වර්ගය සඳහා නූලක් (string) පිළිගන්නා අතර, දෙවන පරාමිතිය වනුයේ payload සඳහා වන ආපසු කැඳවුම් ශ්‍රිතය (callback function), එය අවසානයේ දත්ත හෝ දෝෂයක් සහිත පොරොමිසයක් (promise) ආපසු දෙනු ඇත (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
  }
)