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

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

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

app/root.jsximport { Outlet } from 'react-router-dom'

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

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

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

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

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

products/ProductsList.jsximport { NewProductForm } from './NewProductForm'

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

products/ProductsList.jsxreturn (
  <div>
    <NewProductForm />
    <div>
      <h2>Products</h2>
      {dispProducts}
    </div>
  </div>
)

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

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

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

App.jsximport { ProductsList } from './parts/products/ProductsList'

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

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

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

App.jsxchildren: [
  {
    path: '/products',
    element: <ProductsList />,
  },
],

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