Redux යෙදුමක ක්‍රියාකාරිත්වය සාකච්ඡා කිරීම

පසුගිය පාඩම්වලදී, අපි Redux යෙදුමක් ක්‍රියාත්මක වීමට අවශ්‍ය සියලුම අංග ක්‍රියාත්මක කළෙමු. දැන් අපි අවසන් සාරාංශයක් ගෙන අපගේ නිෂ්පාදන සමඟ යෙදුමේ ක්‍රියාකාරිත්වයේ ප්‍රධාන අවස්ථා හැකිළින් විස්තර කරමු.

පළමුව අපගේ යෙදුම අරඹන විට, store එකෙන් useSelector භාවිතයෙන් නිෂ්පාදන දෙකක ලැයිස්තුව ලබාගෙන තිරය මත පෙන්වයි. තිරය මත නව නිෂ්පාදනයක දත්ත ඇතුළත් කළ හැකි ආකෘතිපත්‍රයක් ද පෙන්වයි. පරිශීලකයා සුරැකීමේ බොත්තම ඔබන විට, බොත්තමේ හසුරුව නව නිෂ්පාදනයේ දත්ත අඩංගු productAdded ක්‍රියාව යොමු කරයි. පරිශීලකයා ආකෘතිපත්‍රයට ඇතුළත් කළ දත්ත මේවාය. අපි නිෂ්පාදන ස්ලයිස් සඳහා ලියූ ශ්‍රිත-ක්‍රියාත්මක කරන්නාට මෙම ක්‍රියාව ලැබෙන අතර එය නිෂ්පාදන සමඟ ඇති අරාවට නව නිෂ්පාදනය සහිත වස්තුව එකතු කරයි. Store එක අනුභව්‍ය දත්ත වෙනස් වී ඇති බව සංරචකවලට දන්වයි. අපගේ ProductsList සංරචකය වෙනස් වූ අරාව කියවන අතර ප්‍රති-නිර්මාණය ඇමතුම් කරයි, එහි ප්‍රතිඵලයක් ලෙස අපි නිෂ්පාදන ලැයිස්තුවේ එකතු කළ නිෂ්පාදනය දකිමු.

දැන් අපි බ්‍රවුසරයේ Redux DevTools විවෘත කර තවත් නිෂ්පාදනයක් යෙදුමට එක් කර, පසුව Log monitor ටැබ් එක බලමු, මෙහිදී අපට යෙදුම ආරම්භ කරන විට අපගේ state කෙසේ වියද, පසුව සුරැකීමේ බොත්තම ඔබා ඇති පසු, ක්‍රියාව පැමිණියේ කෙසේද යන්න දැක ගත හැකිය. අපට එහි payload දේපල සහ සාමාන්‍ය state හි වෙනස්කම් දැක ගත හැකිය.

මීළඟ පරිච්ඡේදයේදී, අපි අපගේ Redux යෙදුමේ දත්ත සමඟ වඩාත් මූලික ව රැකියා කරන්නෙමු.

Задание 1

ඔබේ ශිෂ්‍යයන් සමඟ යෙදුම අරඹන්න. බ්‍රවුසරයේ Redux DevTools විවෘත කරන්න. ඔබේ යෙදුමේ පිටුවේ ඇති ආකෘතිපත්‍රයට තවත් ශිෂ්‍යයෙකු සඳහා දත්ත ඇතුළත් කර ඒවා සුරකින්න. Redux DevTools හි Log monitor ටැබ් එකේ කාර්ය සාධන ප්‍රතිඵල බලන්න.

Задание 2

තවත් ශිෂ්‍යයෙකු එක් කර නැවතත් Log monitor ටැබ් එකේ වෙනස්කම් වෙත අවධානය යොමු කරන්න