Redux တွင် slice အပိုထပ်မံပေါင်းထည့်ခြင်း

ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့သည် ထုတ်ကုန်များအတွက် products slice အပေါ် အလုပ်များစွာလုပ်ခဲ့ကြသည်။ တကယ့် Redux အက်ပ်လီကေးရှင်းတစ်ခုတွင် state ထဲတွင် ရည်ရွယ်ချက်အမျိုးမျိုးအတွက် slice များစွာရှိနိုင်သည်။ ထို့ကြောင့် ဤသင်ခန်းစာတွင် ကျွန်ုပ်တို့၏ အက်ပ်လီကေးရှင်းထဲတွင် ကုန်ပစ္စည်းများကို အမှန်တကယ်ရောင်းချမည့် ရောင်းချသူများအတွက် state ထဲသို့ slice အသစ်တစ်ခုထပ်မံပေါင်းထည့်ပါမည်။

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များပါဝင်သော အက်ပ်လီကေးရှင်းကို ဖွင့်ပြီး ပထမဆုံးလုပ်ရမည့်အရာမှာ parts ဖိုလ်ဒါထဲတွင် နောက်ထပ် sellers ဖိုလ်ဒါတစ်ခုကို ဖန်တီးခြင်းဖြစ်သည်။ ဤနေရာတွင် ရောင်းချသူများနှင့် သက်ဆိုင်သော ကုဒ်များနှင့် component များအားလုံးကို ထည့်သွင်းပါမည်။

ယခု ထုတ်ကုန်များနှင့် ဖြစ်စဉ်အတိုင်း ရောင်းချသူများအတွက် slice တစ်ခုကို ဖန်တီးကြပါစို့။ အစပိုင်းအနေနှင့် sellers ဖိုလ်ဒါထဲတွင် sellersSlice.js ဖိုင်ကို ဖန်တီးပြီး ၎င်းထဲသို့ createSlice ကို import လုပ်ပါမည်။

parts/sellers/sellersSlice.jsimport { createSlice } from '@reduxjs/toolkit'

စံချိန်ကိုက် အဆင့်များကို ဆက်လက်လုပ်ဆောင်ပါမည်။ slice အတွက် ကနဦးတန်ဖိုးအဖြစ် ရောင်းချသူ လေးဦးကို ဖန်တီးပါမည်။ ရိုးရှင်းစေရန် ၎င်းတို့တွင် အကွက်နှစ်ခု ရှိမည်။ id နှင့် name ဖြစ်သည်။

sellers/sellersSlice.jsconst initialState = [
  { id: '0', name: 'Super Power' },
  { id: '1', name: 'Miracle Life' },
  { id: '2', name: 'Dolls&Toys' },
  { id: '3', name: 'Granny' },
]

အောက်တွင် createSlice ကို အသုံးပြု၍ slice sellers ကို ဖန်တီးပါမည်။ ၎င်းထံ ကနဦးတန်ဖိုးကို ပေးပို့ပါမည်။ နောက်ပိုင်းတွင် ရောင်းချသူများကို ထည့်သွင်းခြင်း သို့မဟုတ် ၎င်းတို့၏ ဒေတာများကို အပ်ဒိတ်လုပ်ခြင်း မလုပ်မည်ဖြစ်သောကြောင့် reducers အကွက်ကို လောလောဆယ် အလွတ်ထားခဲ့ပါစို့။

sellers/sellersSlice.jsconst sellersSlice = createSlice({
  name: 'sellers',
  initialState,
  reducers: {},
})

ဖိုင်အဆုံးတွင် ရရှိလာသော reducer ကို export လုပ်ရန်မမေ့ပါနှင့်။

sellers/sellersSlice.jsexport default sellersSlice.reducer

ယခု ကျွန်ုပ်တို့သည် app ဖိုလ်ဒါအတွင်းရှိ store.js ဖိုင်ကို ဖွင့်ပြီး ရရှိလာသော reducer ကို import လုပ်ရန် လိုအပ်ပါသည်။

app/store.jsimport sellersReducer from '../parts/sellers/sellersSlice'

ထို့နောက် configureStore ထဲတွင် ၎င်းကို sellers အတွက် reducer အဖြစ် သတ်မှတ်ပါမည်။

app/store.jsexport default configureStore({
  reducer: {
    products: productsReducer,
    sellers: sellersReducer,
  },
})