Redux හි action යැවීම සහ useDispatch hook

Redux යෙදුමක් සඳහා අවශ්ය සියලුම කොටස් අපි පාහේ සැකසා ඇත. React component එකකින් action යැවීම පමණක් අවශ්යයි. අපි ආරම්භ කරමු.

අපගේ නිෂ්පාදන යෙදුම විවෘත කරන්න. NewProductForm component එකේ form එකේ, නව නිෂ්පාදන දත්ත සුරැකීම සඳහා අපට බොත්තමක් ඇත. අපි එයට click event handler එකක් එක් කරමු. එය ක්ලික් කළ විට onSaveProductClick handler එක ක්‍රියාත්මක වනු ඇතැයි සිතමු:

<button type="button" onClick={onSaveProductClick}>
	සුරකින්න
</button>

නව නිෂ්පාදනයක් සෑදීමේදී, අපට ඒ සඳහා නව id එකක් අවශ්ය වේ. අපි එය සෑදීම සඳහා සුප්‍රසිද්ධ nanoid library එක භාවිතා කරමු. මාර්ගයෙන්, එය ස්ථාපනය කිරීමට අවශ්‍ය නැත, මන්ද එය RTK පැකේජය සමඟම ලබා දී ඇත. අපි nanoid import කිරීමට එක් කරමු:

import { nanoid } from '@reduxjs/toolkit'

එසේම, state එක වෙනස් කිරීමට ඇති එකම ක්‍රමය වන්නේ dispatch method එක කැඳවීම සහ action object එක ලබා දීම බව අපි මතක තබා ගනිමු. මෙම method එකට ප්‍රවේශ වීම සඳහා, අපි React-Redux hook එක වන useDispatch භාවිතා කරමු. අපි එය import කරමු:

import { useDispatch } from 'react-redux'

NewProductForm function එකේ කේතය තුළ, අපගේ local state සඳහා constants නිර්වචනය කිරීමෙන් පසුව, අපි වහාම dispatch සඳහා constant එකක් නිර්වචනය කරමු:

const dispatch = useDispatch()

එසේම, අපි පෙර පාඩමේදී ලබා ගත් productAdded action creator එක import කිරීම අවශ්‍ය වේ:

import { productAdded } from './productsSlice'

දැන් අපට onSaveProductClick handler function එකම ලිවිය හැකිය. අපි මෙය return command එකට පෙර කරමු:

const onSaveProductClick = () => {}

Function එක තුළ, අපි dispatch කැඳවන්නෙමු, action object එකක් සකසන්නෙමු, එහි payload property එකට අපි ජනනය කරන ලද id, නම, විස්තරය, මිල සහ නිෂ්පාදන ප්‍රමාණය ඇතුළත් කරමු. මෙම දත්ත සියල්ල අපි local state වලින් ගනිමු. මෙම අවස්ථාවේදී, ආරම්භකයේදී ක්ෂේත්‍ර සියල්ල පුරවා ඇත්දැයි අපි පරීක්ෂා කරමු - මෙම අවස්ථාවේදී පමණක් අපි dispatch කැඳවන්නෙමු. Function එකේ කේතය අවසානයේදී, අපි local state ආරම්භක තත්ත්වයට ආපසු යවමු:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

දැන් අපගේ යෙදුම ආරම්භ කර, පෝරමයේ ක්ෂේත්‍රවලට දත්ත ඇතුළත් කර සුරැකීමේ බොත්තම ක්ලික් කරන්න. හුරෙයි, පිටුවේ පහළට නව නිෂ්පාදනයක් දිස්වේ. Redux DevTools විවෘත කර, එහි Inspector tab එක විවෘත කර, වම් පසින් @@INIT හැරුණු විට අපගේ action එක products/productAdded ද දක්නට ලැබෙනු ඇත. දකුණු පැත්තේ, අපට Action සහ State tabs අතර ක්ලික් කර @@INIT සහ products/productAdded අතර මාරු විය හැකිය. දැන් අපි අපගේ නව නිෂ්පාදනය එකතු වන ආකාරය දකිමු. එසේම Action tab එකේ, createSlice භාවිතයෙන් ස්වයංක්‍රීයව ජනනය කරන ලද action එක අපට දැක ගත හැකිය (උදාහරණයක් ලෙස, Raw මත ක්ලික් කරන්න). හුරෙයි: අපට එය අතින් ලිවීමට සිදු නොවීය.

ඔබගේ ශිෂ්ය යෙදුම විවෘත කරන්න, ඉන්පසු NewStudentForm.jsx ගොනුව විවෘත කර, සුරැකීමේ බොත්තමට click event handler එකක් එක් කරන්න.

අවශ්‍ය සියලුම imports ලියා, පාඩමේ පෙන්වා දී ඇති පරිදි dispatch method එක යෙදීමෙන් onSaveStudentClick handler function එක ලියන්න.

යෙදුම ආරම්භ කර, පෝරමයේ ක්ෂේත්‍රවලට දත්ත ඇතුළත් කර සුරැකීමේ බොත්තම ක්ලික් කරන්න. පිටුවේ පහළට නව ශිෂ්යයකු එකතු වී ඇති බවට වග බලා ගන්න.

Redux DevTools විවෘත කර Action සහ State tabs හරහා ගොස්, නව ශිෂ්ය වස්තුව එකතු වන බවට වග බලා ගන්න. ඔබට ජනනය වූ action object එක බලන්න, මෙම කාර්යය සඳහා පිළිතුරේ එය යවන්න.