Redux သို့ Slice ထည့်သွင်းခြင်း

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

ဤသင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် slice (slices) အယူအဆဖြင့် စတင်ပါမည်။ Redux application တွင် store ၌သိမ်းဆည်းထားသော global state တစ်ခုသာရှိသည်။ ထို state သည် slice များအဖြစ် ခွဲခြားထားသည်။ အမှန်အားဖြင့် slice ဆိုသည်မှာ application ၏ တစ်စိတ်တစ်ပိုင်းအတွက် မူလ state၊ reducer နှင့် action ဆိုင်ရာ ယုတ္တိတန်ခြင်းများ ပါဝင်သည့် သိုလှောင်ရာမှ အပိုင်းတစ်ခုဖြစ်သည်။

ကျွန်ုပ်တို့၏ application တွင် ထုတ်ကုန်များ ပါဝင်မည်ဖြစ်သဖြင့် ကျွန်ုပ်တို့ ပြုလုပ်မည့် ပထမဆုံး slice သည် ထုတ်ကုန်များနှင့် သက်ဆိုင်သော အချက်အလက်များကို ပါဝင်ပါလိမ့်မည်။ ထို့အပြင် slice ကိုဖန်တီးသည့်အခါ ထိုအချက်အလက်ကို မည်သို့ကိုင်တွယ်ရမည်ကို သိသော reducer တစ်ခုကိုလည်း ထည့်သွင်းရန် လိုအပ်ပါသည်။

ယခု src ဖိုဒါထဲသို့ ဝင်ပြီး parts ဖိုဒါကို ဖန်တီးကြပါစို့၊ ၎င်းနောက် ထိုအတွင်းတွင် products ဖိုဒါကို ဖန်တီးပါ - ထုတ်ကုန်များနှင့် သက်ဆိုင်သည့် ကုဒ်ဖိုင်များအားလုံးကို ဤနေရာတွင် ထည့်သွင်းပါမည်။ products ဖိုဒါအတွင်း၌ productsSlice.js ဟုခေါ်သော ဖိုင်ကို ဖန်တီးပါမည်၊ ၎င်းနောက် RTK မှ createSlice လုပ်ဆောင်ချက်ကို import လုပ်ပါမည်။ ဤလုပ်ဆောင်ချက်ကို အသုံးပြု၍ slice များကို ဖန်တီးပါမည်။

parts/products/productsSlice.jsimport { createSlice } from '@reduxjs/toolkit'

ယခု ထုတ်ကုန်များအတွက် slice ကို ဖန်တီးပြီး 'products' ဟု အမည်ပေးကြပါစို့။ reducers property အတွက် ယခုအချိန်တွင် ကျွန်ုပ်တို့ ကွင်းနှစ်ထပ်အလွတ်ကို ချန်ထားပါမည်။

parts/products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {}
})

ထို့အပြင် ကျွန်ုပ်တို့သည် initialState - application ကို ပထမဆုံးအကြိမ် စတင်သည့်အခါ တင်၍ပေးမည့် state slice ၏ ကနဦးအခြေအနေကို သတ်မှတ်ရန် လိုအပ်ပါသည်။ import လုပ်ပြီးနောက် နှင့် slice ဖန်တီးခြင်း မပြုမီ ချက်ချင်းရေးကြပါစို့။ ထိုအရာသည် ထုတ်ကုန်အချက်အလက် ပါဝင်သည့် အရာဝတ္ထုအနည်းငယ်ပါဝင်သော array တစ်ခု ဖြစ်ပါစေ။ ထုတ်ကုန်တစ်ခုစီအတွက် id၊ အမည်၊ ဖော်ပြချက်၊ ဈေးနှုန်းနှင့် အရေအတွက်ကို သတ်မှတ်ပေးပါမည်။

parts/products/productsSlice.jsconst initialState = [
  {
    id: '1',
    title: 'Product1',
    desc: 'This is an amazing product',
    price: '300',
    amount: '30',
  },
  {
    id: '2',
    title: 'Product2',
    desc: 'This is a nice product',
    price: '700',
    amount: '12',
  },
]

ဖိုင်၏ကုဒ် အဆုံးတွင် ကျွန်ုပ်တို့သည် createSlice လုပ်ဆောင်ချက်၏ ရလဒ်မှ ၎င်းမှ ထုတ်လုပ်ပေးသော reducer ကို ယူပြီး export လုပ်ပါမည်။ ၎င်းသည် application ၏ အခြားဖိုင်များတွင် အသုံးဝင်ပါလိမ့်မည်။

parts/products/productsSlice.jsexport default productsSlice.reducer