Redux တွင် ဒေတာများနှင့် အလုပ်လုပ်ခြင်း

ယခင်အပိုင်းတွင် ကျွန်ုပ်တို့သည် Redux ၏ အခြေခံအလုပ်လုပ်ပုံစနစ်ကို အကောင်အထည်ဖော်ခဲ့ပြီး ယခုဆိုလျှင် Redux application ၏ အဓိကအခြေခံမူများကို သင်သိရှိပြီးဖြစ်သည်။ နောက်လာမည့် သင်ခန်းစာများတွင် ကျွန်ုပ်တို့သည် ထုတ်ကုန်များနှင့်အတူ ကျွန်ုပ်တို့၏ application ၏ လုပ်ဆောင်ချက်များကို စတင်ဖြည့်စွက်သွားမည်ဖြစ်ပြီး ဒေတာများနှင့် အလုပ်လုပ်သွားမည်ဖြစ်သည်။

Application သည် component အသစ်များနှင့် route အသစ်များဖြင့် ကြီးထွားလာမည်ဖြစ်သောကြောင့် routing နှင့်ပတ်သက်၍ အရာတစ်ခုကို ပြုလုပ်ကြပါစို့။ ထုတ်ကုန်များနှင့် application ကို ဖွင့်ပါ၊ ထို့နောက် root.jsx ဖိုင်ကို ဖွင့်ပါ။ ၎င်းထဲသို့ Outlet component ကို import လုပ်ပါ၊ ဤသို့ပြုလုပ်ရာတွင် ProductsList နှင့် NewProductForm တို့၏ import စာကြောင်းများကို ဖျက်ပစ်ပါ-

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

ယခုဆိုလျှင် Root component ကို ကျွန်ုပ်တို့၏ အမြစ် (root) လမ်းကြောင်း '/' တွင် ပြသမည်ဖြစ်ပြီး အခြား component အားလုံးကို Outlet အတွင်းရှိ ကလေး (child) နေရာများတွင် ပြသမည်ဖြစ်သည်။ ဤအတွက် Root component အတွက် #main-page div ၏ markup ကို အနည်းငယ် ပြင်ဆင်ပါမည်-

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

ဤနေရာတွင် ကျွန်ုပ်တို့သည် component များဖြစ်သော NewProductForm နှင့် ProductsList တို့အစား Outlet ကို ထားရှိမည်-

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

ထုတ်ကုန်များထည့်သွင်းရန် form ကို ယခုဆိုလျှင် ကျွန်ုပ်တို့သည် ProductsList အတွင်း၌ ထုတ်ပြမည်ဖြစ်သည်။ ဤ component ပါဝင်သော ဖိုင်ကို ဖွင့်ပြီး form ကို import လုပ်ကြပါစို့-

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

ယခုဆိုလျှင် ထုတ်ကုန်စာရင်း၏ အတိအကျရှေ့တွင် form ပါဝင်သော component ကို ထည့်သွင်းပါမည်။ ယခုဆိုလျှင် ကျွန်ုပ်တို့၏ markup သည် ဤကဲ့သို့ ပုံစံရှိလာမည်-

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

index.css ထဲတွင် products-list class အတွက် style ကို ရေးသွင်းပါမည်-

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

ကျွန်ုပ်တို့လုပ်ရန်ကျန်ရှိသည်မှာ အဓိက component ဖြစ်သော App အတွင်း၌ ပြောင်းလဲမှုများကို ပြုလုပ်ရန်ဖြစ်သည်။ App.jsx ကို ဖွင့်ပြီး ၎င်းထဲသို့ ProductsList component ကို import လုပ်ပါ-

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

ထို့နောက် ကျွန်ုပ်တို့၏ ယခုချိန်ထိ တစ်ခုတည်းသော လမ်းကြောင်း (route) ဖြစ်သည့် အမြစ် (root) လမ်းကြောင်းအတွက် children property ကို ထည့်သွင်းပါမည်-

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

ထို့နောက် ဤ property ၏ တန်ဖိုးအဖြစ် ပထမဆုံး ကလေး (child) လမ်းကြောင်းကို သတ်မှတ်ရေးသားပါမည်။ လမ်းကြောင်း (path) အဖြစ် 'products' ကို သတ်မှတ်ပါမည်။ ယခုဆိုလျှင် ဤလိပ်စာအထိ ကျွန်ုပ်တို့၏ ထုတ်ကုန်စာရင်း ProductsList ကို ပြသမည်ဖြစ်သည်-

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

ကျွန်ုပ်တို့၏ application ကို စတင်လိုက်ပါ နှင့် ကျွန်ုပ်တို့သည် ဘာမျှမပျက်စီးကြောင်း သေချာပါစေ။ အမြစ် (root) '/' တွင် ကျွန်ုပ်တို့သည် ခေါင်းစဉ်ကိုသာ မြင်တွေ့ရမည်။ အသေးစိတ်ဖော်ပြချက် (form) နှင့် ထုတ်ကုန်စာရင်းမှာ လိပ်စာ '/products' တွင် ဝှက်ထားသည်ကို တွေ့ရမည်။