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

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

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

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

import { createSlice } from '@reduxjs/toolkit'

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

const initialState = [
	{ id: '0', name: 'Super Power' },
	{ id: '1', name: 'Miracle Life' },
	{ id: '2', name: 'Dolls&Toys' },
	{ id: '3', name: 'Granny' },
]

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

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

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

export default sellersSlice.reducer

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

import sellersReducer from '../parts/sellers/sellersSlice'

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

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

သင်၏ ကျောင်းသားများပါဝင်သော အက်ပ်လီကေးရှင်းကို ဖွင့်ပါ။ နောက်ထပ် teachers ဖိုလ်ဒါတစ်ခုကို ဖန်တီးပါ။ ဤနေရာတွင် သင်သင်ကြားသူများနှင့် သက်ဆိုင်သော ကုဒ်ဖိုင်များ ရှိမည်။ ၎င်းထဲတွင် ဖိုင်တစ်ခုကို teachersSlice.js ဖြင့် ဖန်တီးပါ။ သင်ခန်းစာပါအကြောင်းအရာများကို အသုံးပြု၍ ၎င်းထဲတွင် teachers slice ကို createSlice ဖြင့် ဖန်တီးပါ။

�ရာတစ်ဦးစီ၏ ဒေတာအရာဝတ္ထုတွင် ဂုဏ်သတ္တိသုံးခု ရှိပါစေ။ id, name (အမည်နှင့် အက္ခရာစလုံးများပါဝင်မည်။ ဥပမာ 'ပေတရု အေ.ဗီ.') နှင့် ဘာသာရပ် (သင်စိတ်ကူးရနိုင်သည့် မည်သည့်ဘာသာရပ်မဆို။ ရူပဗေဒ၊ သင်္ချာ၊ ဇီဝဗေဒ စသည်)။ slice အတွက် ကနဦးတန်ဖိုးအဖြစ် ဆရာ ၃ ဦးပါသော ဒေတာအရာဝတ္ထုများကို ပြုလုပ်ပါ။

ရရှိလာသော reducer teachersReducer ကို store.js သို့ import လုပ်ပြီး teachers အတွက် reducer အဖြစ် သင်ခန်းစာတွင် ပြထားသည့်အတိုင်း သတ်မှတ်ပါ။