Redux යෙදුමක් තුළ action යැවීම
දැන් අපට ප්රතික්රියා ස්ලයිසය යාවත්කාලීන කිරීම සඳහා රිඩියුසරයක් තිබේ. දැන් අපට අවශ්ය වන්නේ, පරිශීලකයා ප්රතික්රියා බොත්තම මත ක්ලික් කරන විට ක්රියාත්මක වන action යැවීම එකතු කිරීමයි. නමුත් පළමුව, සියල්ල සම්පූර්ණයෙන් ක්රියා කිරීමට, අපට පේලි දෙකක වෙනස්කම් කිරීමට අවශ්යය.
අපගේ නිෂ්පාදන යෙදුම විවෘත කරමු, එහි ඇති ගොනුව productsSlice.js. initialState හි නිර්වචනය දෙස බලන්න.
ඔබට පෙනේද? වස්තු වල ප්රතික්රියා සමඟ ගුණයක් නොමැත. අපි එය නිවැරදි කරමු, එක් එක් ප්රතික්රියා ගණනය කිරීම් 0 ලෙස සැකසීමෙන්:
{
id: '1',
title: 'Product1',
desc: 'This is an amazing product',
price: '300',
amount: '30',
reactions: {
good: 0,
soso: 0,
bad: 0,
},
},
දෙවන ආරම්භක වස්තුවට reactions ගුණය ඔබම එක් කරන්න.
අලුත් නිෂ්පාදන වලද එවැනි ක්රියාකාරීත්වයක් තිබීම සඳහා, පහත දැක්වෙන productAdded රිඩියුසර් කේතයට මෙම ගුණය එකතු කිරීම අපට අවශ්ය වේ.
අපි එය එහි prepare ක්රමය සඳහා කරමු:
prepare(title, desc, price, amount, sellerId) {
return {
payload: {
id: nanoid(),
title,
desc,
price,
amount,
seller: sellerId,
reactions: {
good: 0,
soso: 0,
bad: 0,
},
},
}
},
දැන් අපි action යැවීම ආරම්භ කරමු. අපි UserReactions.jsx ගොනුව විවෘත කරමු,
ඉන්පසු එයට useDispatch හුක් සහ reactionClicked ආයාත කරමු:
import { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'
කේතය ආරම්භයේදී, UserReactions ශ්රිතයේ ශරීරය තුළ පළමු පේළිය (const userReactions ... ට පෙර) ලෙස ලියන්න:
const dispatch = useDispatch()
ප්රතික්රියා බොත්තම මත, ක්ලික් කිරීමේදී reactionClicked යැවීම අපි සවි කරමු,
මෙමගින් නිෂ්පාදනයේ id සහ ක්ලික් කරන ලද ප්රතික්රියාවේ නම සමඟ යවනු ලැබේ:
<button
key={name}
type="button"
className="reaction-button"
onClick={() =>
dispatch(reactionClicked({ productId: product.id, reaction: name }))
}
>
{image} {product.reactions[name]}
</button>
දැන් අපට ඉතිරිව ඇත්තේ අපගේ පිටු සඳහා ප්රතික්රියා සහිත කොම්පෝනන්ටය අපගේ අලංකරණයේ ප්රතිදානය කිරීමයි.
අපි එය ProductsList.jsx ගොනුවේ Link මූලද්රව්යයට පෙර කරමු:
<UserReactions product={product} />
හා නිශ්චිතවම එලෙසම ProductPage.jsx ගොනුවේ නිෂ්පාදන පිටුවේ Link මූලද්රව්යයට පෙර:
<UserReactions product={product} />
දැන්, සියල්ල තමන්ගේ ස්ථානයට පැමිණි විට, අපට අපගේ යෙදුම ආරම්භ කළ හැකිය. ප්රතික්රියා බොත්තම් මත ක්ලික් කිරීමට උත්සාහ කරමු. අපට නව නිෂ්පාදනයක් එක් කර ඒවා මත එලෙසම ක්ලික් කළ හැකිය. දැන්, අපි ප්රතික්රියා බොත්තම් මත ක්ලික් කළත් නොකළත්, වෙනස් කරන ලද අගයන් මෙම නිෂ්පාදනය සඳහා සියලු පිටු වල ප්රදර්ශනය වේ. තනි නිෂ්පාදනයේ පිටුව (ඔබ ප්රතික්රියා මත ක්ලික් කළ) සහ ඒවායේ ලැයිස්තුව සහිත පිටුව දෙස බලන්න, හා ප්රතිවිරුද්ධව, සියලු පිටු සඳහා නිශ්චිත නිෂ්පාදනයක් සඳහා ප්රතික්රියා සංඛ්යාව සමාන වේ.
Redux හි දත්ත සමඟ වැඩ කිරීම පිළිබඳ පරිච්ඡේදයේ මෙම පාඩම අවසන් විය. අපි Redux store හි දත්ත සමඟ වැඩිදුරටම වැඩ කළ අතර දැන් අපි දන්නවා, යෙදුමට අවශ්ය ක්රියාකාරීත්වය එක් කරන්නේ කෙසේද සහ React කොම්පෝනන්ට් වල දත්ත භාවිතා කරන්නේ කෙසේද යන්න.
ඔබගේ ශිෂ්ය යෙදුම විවෘත කරන්න. studensSlice.js ගොනුවේ, ආරම්භක වස්තූන් සඳහා votes ගුණය අනුරූප ක්ෂේත්ර සමඟ එක් කරන්න.
මෙය studentAdded රිඩියුසරය සඳහාද කරන්න.
UserVotes.jsx ගොනුවේ UserVotes ශ්රිතය තුළ, useDispatch හුක් සඳහා dispatch පැවරීමක් සකසන්න
සහ පාඩමේ දැක්වෙන පරිදි, ඡන්ද බොත්තම් මත ක්ලික් කිරීමේදී voteClicked action යැවීම කරන්න, එයට ශිෂ්යයාගේ id සහ vote හි නම යවන්න.
StudentsList සහ StudentPage කොම්පෝනන්ට් සඳහා අලංකරණයේ ඡන්ද බොත්තම් ප්රතිදානය කරන්න.
