Redux හි සංරචකයකින් thunk යැවීම
මෙම පාඩමෙන්, අපි React සංරචකය ProductsList වෙතින් නිෂ්පාදන ලබා ගැනීම සඳහා thunk එකක් යවමු.
දැන් අපි අපේ නිෂ්පාදන යෙදුම විවෘත කරමු, එහි ඇති ගොනුව ProductsList.jsx වේ. පළමුව, අපි සාදන ලද thunk fetchProducts ආයාතයට එකතු කරමු:
import { selectAllProducts, fetchProducts } from './productsSlice'
අපගේ action creator යැවීම සඳහා useDispatch hook එකත්, useEffect hook එකත් අවශ්ය වනු ඇත, මන්ද අපි ජාලය සමඟ ගනුදෙනු කරන බැවින් මෙය
පාර්ශ්වීය බලපෑමක් වන අතර එය පිටත API එකක් වේ:
import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
දැන්, ProductsList ශ්රිතයේ කේතයේ පළමු පේළියට, products ප්රකාශයට පෙර, අපි එකතු කරමු:
const dispatch = useDispatch()
ඊළඟට, තත්වයෙන් නිෂ්පාදන ලබා ගැනීමේදී, අපි ඉල්ලීමේ තත්වය ද නිස්සාරණය කරමු:
const products = useSelector(selectAllProducts)
const productStatus = useSelector((state) => state.products.status)
ඉන්පසුව, useEffect hook එක භාවිතයෙන්, සංරචකය ඉදිරිපත් කිරීමෙන් පසු අපට නිෂ්පාදන ලබා ගැනීමට අවශ්ය බව React වෙත පවසමු. මෙහිදී ඉල්ලීමේ තත්වය අවශ්ය වේ, මන්ද එවැනි ඉල්ලීමක් එක් වරක් පමණක් යැවිය යුතු බව වැදගත්ය:
useEffect(() => {
if (productStatus === 'idle') {
dispatch(fetchProducts())
}
}, [productStatus, dispatch])
දැන් අපට අපගේ යෙදුම ආරම්භ කර, වම්පස මෙනුවේ 'Products' මත ක්ලික් කළ හැකිය. අපට තවමත් නිෂ්පාදන ලැයිස්තුව නොපෙනේ, නමුත් අපි අපගේ Redux DevTools වෙත ගියහොත්, කවුළුවේ වම් පැත්තේ ස්වයංක්රීයව ජනනය වූ ක්රියාවන් products/fetchProducts/pending සහ fulfilled දක්නට ලැබෙනු ඇත. දැන් අපි products/fetchProducts/fulfilled ක්රියාව මතත්, එහි payload ක්ෂේත්රය මතත් ක්ලික් කරමු - අපගේ නිෂ්පාදන ලැයිස්තුව එහි ඇත! අපගේ දාමයේ සියලු සබැඳි - සේවාදායකය, දත්ත සමුදාය, අනුග්රාහකය සහ Redux - යෙදුම සහයෝගීව හා එකට වැඩ කරයි. මාර්ගය වන විට, ඔබට මෙහි meta ගුණාංගය ද දැකගත හැකිය, එහි ඉල්ලීමේ තත්වය අපට පෙනේ.
තවත් කරුණක් වෙත අවධානය යොමු කරමු, ඔබට pending සහ, එහි ප්රතිඵලයක් ලෙස, fulfilled දෙවරක් පෙන්වන ආකාරය සිදුවිය හැකිය. එය එසේ නම්, කණගාටු නොවන්න, අපි මේ ගැන පසුව කතා කරමු.
ඔබගේ ශිෂ්ය යෙදුම විවෘත කරන්න. එහි ගොනුව StudentsList.jsx විවෘත කරන්න. පාඩමේ අන්තර්ගතය අනුව අවශ්ය hooks සහ thunk එයට ආයාත කරන්න.
පාඩමේ අන්තර්ගතය අධ්යයනය කර, ඉල්ලීමේ තත්වය studentStatus ලබා ගන්න, ඉන්පසු, useEffect භාවිතා කර, studentStatus හි අගය 'idle' නම් පමණක් fetchStudents යවන්න.
ඔබගේ යෙදුම ආරම්භ කරන්න, වම්පස මෙනුවේ 'Students' මත ක්ලික් කරන්න, ඉන්පසු බ්රවුසරයේ Redux DevTools දිගුව ක්රියාත්මක කරන්න, මෙම පාඩමේ දී මෙන් ඔබට pending සහ fulfilled (සහ එහි ශිෂ්යයන් සමඟ payload) ක්රියා දැකගත යුතුය. දිගුවේ ටැබ් වලින් සොයා බලන්න.
