Redux හි දත්ත සමඟ වැඩ කිරීම

පෙර අංශයේදී අපි Redux හි මූලික වැඩ කිරීමේ යෝජනා ක්‍රමය ක්‍රියාත්මක කළ අතර දැන් ඔබ Redux ඇප් එකක මූලික ක්‍රියාකාරී නිර්මාණ ශිල්පයන් දනී. ඊළඟ පාඩම්වලදී අපි අපේ නිෂ්පාදන සමඟ ඇප් එකට ක්‍රියාකාරකම් එකතු කිරීම ආරම්භ කර දත්ත සමඟ වැඩ කරමු.

ඇප් එකට නව කොටස් සහ මාර්ග එකතු වන බැවින්, මාර්ගකරණය සමඟ එක් කාරණයක් කරමු. නිෂ්පාදන සමඟ ඇප් එක විවෘත කර, ඉන්පසු root.jsx ගොනුව විවෘත කරන්න. එයට Outlet කොටස ආයාත කරන්න, මේ සමඟම ProductsList සහ NewProductForm ආයාත කිරීමේ පේළි මකන්න:

import { Outlet } from 'react-router-dom'

දැන් Root කොටස අපට පෙන්වනු ඇත්තේ මූල මාර්ගය '/' මත වන අතර අනෙක් සියලුම කොටස් Outlet තුළ අංශ මාර්ගවල පෙන්වනු ඇත. මේ සඳහා අපි Root කොටස සඳහා #main-page ඩිව් එකේ පිරිසැලසුම ටිකක් සකසමු:

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<NewProductForm />
	<ProductsList />
</div>

මෙහිදී අපි Outlet යොදන්නෙමු NewProductForm සහ ProductsList කොටස් වෙනුවට:

<div id="main-page">
	<h2>My Products App</h2>
	<hr></hr>
	<Outlet />
</div>

නිෂ්පාදන එකතු කිරීමේ පෝරමය අපි දැන් ProductsList තුළ පෙන්වමු. අපි එම කොටස සහිත ගොනුව විවෘත කර පෝරමය ආයාත කරමු:

import { NewProductForm } from './NewProductForm'

දැන් අපි පෝරමය සහිත කොටස සෘජුවම නිෂ්පාදන ලැයිස්තුවට පෙර එකතු කරමු. දැන් අපේ පිරිසැලසුම මෙලෙස පෙනෙනු ඇත:

return (
	<div>
		<NewProductForm />
		<div>
			<h2>Products</h2>
			{dispProducts}
		</div>
	</div>
)

index.css හි products-list වර්ගය සඳහා විලාසය ලියමු:

.products-list {
	display: flex;
	flex-direction: column;
}

අපට ඉතිරිව ඇත්තේ ප්‍රධාන කොටස App තුළ වෙනස්කම් කිරීමයි. අපි App.jsx විවෘත කර එයට කොටස ProductsList ආයාත කරමු:

import { ProductsList } from './parts/products/ProductsList'

ඉන්පසු අපගේ දැනට ඇති එකම මාර්ගය සඳහා, එය මූල මාර්ගය වන අතර, children ගුණය එකතු කරමු:

const router = createBrowserRouter([
	{ path: '/', element: <Root />, children: [] },
])

මෙම ගුණයේ අගය ලෙස පළමු අංශ මාර්ගය ලියමු. මාර්ගය ලෙස 'products' සකසමු. දැන් මෙම ලිපිනයෙන් අපගේ නිෂ්පාදන ලැයිස්තුව ProductsList පෙන්වනු ඇත:

children: [
	{
		path: '/products',
		element: <ProductsList />,
	},
],

අපගේ ඇප් එක දියත් කර අපි කිසිවක් කඩා දමා නැති බවට විශ්වාස කරමු. මූලයේ '/' අපට පෙන්වන්නේ ශීර්ෂ පාඨය පමණි. පෝරමය සහ නිෂ්පාදන ලැයිස්තුව අපගේ ලිපිනයෙන් '/products' සඟවා ඇත.

ඔබගේ ශිෂ්යයින් සමඟ ඇප් එක විවෘත කරන්න. root.jsx ගොනුවේ StudentsList සහ NewStudentForm කොටස් Outlet මගින් ප්‍රතිස්ථාපනය කරන්න.

දැන් ශිෂ්යයකු එකතු කිරීමේ පෝරමය ඔබගේ StudentsList හි පෙන්වනු ඇත.

ඔබගේ ප්‍රධාන කොටස App හි වෙනස්කම් සිදු කරන්න. මූල මාර්ගයට අංශ මාර්ගයක් එකතු කරන්න, මාර්ගය '/students' සමඟ, එයින් ඔබගේ StudentsList පෙන්වනු ඇත. ඇප් එක දියත් කර ඔබේ සියල්ල ක්‍රියාත්මක වන බවට විශ්වාස කරන්න.