Redux အတွင်း ရောင်းချသူများ၏ အချက်အလက်များ ရယူခြင်း

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

အစပိုင်းအနေဖြင့် server.js ဖိုင်ကို ဖွင့်ပါ။ handlers array ကို ရှာပြီး ၎င်းအတွင်းသို့ GET request တစ်ခုအတွက် ထပ်မံအလုပ်လုပ်ပေးခြင်း (ထုတ်ကုန်များအတွက် GET အလုပ်လုပ်ပေးပြီးနောက်) ထည့်ပါ။ သင်မြင်တွေ့ရသည့်အတိုင်း ၎င်းသည် လက်တွေ့အားဖြင့် အတူတူနီးပါးဖြစ်ပါသည်။

api/server.jshttp.get('/fakeServer/sellers', async () => {
  await delay(ARTIFICIAL_DELAY_MS)
  return HttpResponse.json(db.seller.getAll())
}),

Server ပေါ်ရှိ request ကို ကျွန်ုပ်တို့ အလုပ်လုပ်ပေးလိုက်ပါပြီ။ နောက်အဆင့်အနေဖြင့် sellersSlice.js ဖိုင်တွင် server မှ အချက်အလက်များရယူရန် thunk ကို ရေးသားရပါမည်။ ၎င်းအတွက် client နှင့် createAsyncThunk တို့ကို ထည့်သွင်းရပါမည်။

sellers/sellersSlice.jsimport { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

ယခု ကျွန်ုပ်တို့သည် ရောင်းချသူများကို server မှ ရယူတော့မည်ဖြစ်ရာ၊ ၎င်းတို့ကို initialState မှ ဖယ်ရှား၍ ကွင်းလပ်များသာ ချန်ထားပါမည်။

sellers/sellersSlice.jsconst initialState = []

ထို့နောက် sellersSlice ဖန်ရှင်မတိုင်မီ ကျွန်ုပ်တို့၏ thunk fetchSellers ကို ဖန်တီးပါမည်။ Server ပေါ်တွင် ကျွန်ုပ်တို့ သတ်မှတ်ထားသည့် path ကို client သို့ ပေးပို့ပါမည်။

sellers/sellersSlice.jsexport const fetchSellers = createAsyncThunk(
  'sellers/fetchSellers',
  async () => {
    const response = await client.get('/fakeServer/sellers')
    return response.data
  }
)

sellersSlice အတွက် extra reducer တစ်ခု ဖန်တီးရန်သာ ကျန်တော့ပါသည်။ ဤနေရာတွင် request အောင်မြင်စွာ အလုပ်လုပ်ပေးခြင်းကိုသာ ကန့်သတ်ထားပါမည်။ fetchSellers မှ ထုတ်လုပ်သော action အားလုံးသည် fetchProducts ၏ action များနှင့် အတူတူပင်ဖြစ်ပါမည်။

sellers/sellersSlice.jsconst sellersSlice = createSlice({
  name: 'sellers',
  initialState,
  reducers: {},
  extraReducers(builder) {
    builder.addCase(fetchSellers.fulfilled, (state, action) => {
      return action.payload
    })
  },
})

အရင်အကြိမ်က ထုတ်ကုန်များရယူချိန်တွင် လက်ရှိ state တန်ဖိုးကို ပြောင်းလဲခဲ့ကြောင်း သတိရပါ။ ဤနေရာတွင် ကျွန်ုပ်တို့သည် အနည်းငယ်ကွဲပြားသည့် နည်းလမ်းကို အသုံးပြု၍ အသစ်တန်ဖိုးတစ်ခုသာ ပြန်ပေးခဲ့သည်၊ createSlice အတွင်းတွင်လည်း ဤသို့ပြုလုပ်နိုင်သည်။ ဤသို့ဖြင့် ရည်မှန်းချက်နှစ်ခုကို အောင်မြင်စေပါသည်။ ပထမအချက်အနေဖြင့် ကျွန်ုပ်တို့သည် အချက်အလက်များကို ရရှိခဲ့ပြီး၊ ဒုတိယအချက်အနေဖြင့် ရောင်းချသူစာရင်းထဲတွင် အခြားအရာများ ထပ်မံပေါ်ထွက်လာမည်မဟုတ်ကြောင်း အာမခံချက်ရရှိပါသည်၊ အဘယ့်ကြောင့်ဆိုသော် ကျွန်ုပ်တို့သည် slice တစ်ခုလုံးကို action.payload တန်ဖိုးဖြင့် အစားထိုးရေးသားလိုက်သောကြောင့်ဖြစ်သည်။