Redux တွင် state ၏ဖွဲ့စည်းပုံကိုပြောင်းလဲခြင်း

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

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များပါသော application ကိုဖွင့်ပြီး ၎င်းအတွင်းရှိ ဖိုင်အမည် productsSlice.js ကိုဖွင့်ပါ။ initialState ၏သတ်မှတ်ချက်ကို သတိပြုပါ။ အစက ကျွန်ုပ်တို့၏ ထုတ်ကုန်များ slice productsSlice သည် ထုတ်ကုန်အချက်အလက်များပါသည့် (ကျွန်ုပ်တို့အခင်းအကျင်းတွင် နှစ်ခုရှိသည်) object များပါဝင်သော array တစ်ခုဖြစ်သည်။ ပထမဆုံး၊ ယခုအခါ ကျွန်ုပ်တို့သည် ၎င်းတို့ကို ဆာဗာမှ လတ်တလောချိန်တွင် လာရောက်ရယူမည်ဖြစ်သောကြောင့် ၎င်းတို့ကို initialState မှ ဖယ်ရှားရန်လိုအပ်သည်။ ဒုတိယအနေဖြင့်၊ ကျွန်ုပ်တို့သည် ဆာဗာသို့ API တောင်းဆိုချက်များပို့မည်ဖြစ်ပြီး ၎င်းတို့၏အခြေအနေကို သိရှိရန် အရေးကြီးပါမည်။ ဤအရာနှစ်ခုကို ထည့်သွင်းစဉ်းစားကာ၊ initialState ကို ပြန်လည်ပြင်ဆင်ကြပါစို့။ ယခုအခါ ၎င်းသည် products (ကနဦးတွင် အချက်အလက်များမရှိဘဲ ဗလာ array တစ်ခုသာရှိမည်)၊ status နှင့် error ဟူသော field များပါဝင်သည့် object တစ်ခုသာဖြစ်ပါစေ။ ယခုအခါ ကျွန်ုပ်တို့၏ initialState အတွက် ကုဒ်သည် အနည်းငယ်တိုသွားမည်:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

လောလောဆယ် ကျွန်ုပ်တို့သည် status ကို 'idle' (အနားယူခြင်း) အဖြစ်သတ်မှတ်ထားသည်။ အစက ကျွန်ုပ်တို့သည် မည်သည့်တောင်းဆိုချက်ကိုမျှ မပို့သေးသောကြောင့်ဖြစ်သည်။ ယခုအခါ ၎င်းသည် ပြောင်းလဲသွားမည်ဖြစ်ပြီး 'loading'၊ 'succeeded'၊ 'failed' တို့ကို လက်ခံနိုင်သည်။ အဆင့်အတန်းကို ဖော်ညွှန်းရန် သင့်အတွက်အဆင်ပြေမည့် နာမည်များကို သင်ရွေးချယ်နိုင်သည်ကို မမေ့ပါနှင့်။

ကုဒ်အောက်သို့ ဆက်လက်ဆင်းသွားပါ။ initialState ကိုပြောင်းလဲပြီးနောက်၊ reducer function များအတွင်း ကျွန်ုပ်တို့သည် ထို state နှင့်အလုပ်လုပ်သည့်ကုဒ်ကိုလည်း ပြောင်းလဲရန်လိုအပ်သည်။ productAdded အတွက် ကုဒ်ကိုကြည့်ပါ:

state.push(action.payload)

ယခုအခါ ထုတ်ကုန်အသစ်များကို ထုတ်ကုန်များအတွက် state ထဲသို့ရိုးရိုးအတိုင်းမထည့်တော့ဘဲ ၎င်း၏ property state.products ထဲသို့ ထည့်သွင်းမည်ဖြစ်သည်။ ထို့ကြောင့် အထက်ဖော်ပြပါစာကြောင်းကို အောက်ပါအတိုင်းအစားထိုးပါမည်:

state.products.push(action.payload)

ဒီအတိုင်းပဲ၊ reducer reactionClicked အတွက်လည်း အလားတူပြောင်းလဲမှုများကိုပြုလုပ်ပါမည်။ အောက်ပါအတိုင်း:

const currentProduct = state.find((product) => product.id === productId)

အခုအခါမှာတော့ ဒီလိုဖြစ်လိမ့်မယ်:

const currentProduct = state.products.find((product) => product.id === productId)

reducer productUpdated အတွင်းရှိကုဒ်တွင်လည်း state ကို state.products အဖြစ်သို့ သင်ကိုယ်တိုင်အစားထိုးပါ။

သင့်ကျောင်းသားများပါသော application ကိုဖွင့်ပါ။ ၎င်းအတွင်းရှိ ဖိုင်အမည် studentsSlice.js ကိုဖွင့်ပါ။ ယခုအခါ သင်၏ initialState သည် property သုံးခုရှိပါစေ: students၊ status၊ error - သင်ခန်းစာတွင်ပြထားသည့်အတိုင်း ၎င်းကိုပြန်လည်ပြင်ဆင်ပါ။

သက်ဆိုင်ရာအပြောင်းအလဲများကို အောက်တွင်ကုဒ်တွင်လည်း ပြုလုပ်ပါ။ သင်၏ reducer function သုံးခုအတွက် ကုဒ်တွင် state ကို state.students အဖြစ်သို့ အစားထိုးပါ။