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>

এখানে আমরা NewProductForm এবং ProductsList কম্পোনেন্টগুলির পরিবর্তে Outlet রাখব:

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' অ্যাড্রেসে লুকিয়ে আছে।