Reduxда сотиловчилар маълумотларини олиш

Келинг, маҳсулотлар билан иловамизни ишга туширамиз. Маҳсулотлар карточкаларида сотиловчилар кўрсатилмаганини кўрамиз. Келинг, уларни сервердан олиб, бу маълумотларни чиқарайлик. Бунинг учун бизга аллақачон таниш бўлган ҳаракатлар кетма-кетлигини амалга оширишимиз керак бўлади.

Бошлаш учун server.js файлини очамиз. handlers массавини топамиз ва унга яна битта GET-соринишни қайта ишлашни қўшамиз (маҳсулотлар учун GET-соринишни қайта ишлагандан кейин). Кўриб турганингиздек, у деярли бир хил:

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

Сервердаги соровни биз қайта ишладик. Кейинги босқичда sellersSlice.js файлида сервердан маълумот олиш учун thunk ёзишимиз керак. Бунинг учун унга client ва createAsyncThunk ни импорт қиламиз:

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

Энди биз сотиловчиларни сервердан оламангиз, шунинг учун уларни initialState дан олиб ташлаймиз, фақат бош қовусларни қолдирамиз:

sellers/sellersSlice.jsconst initialState = []

Ва кейин sellersSlice функциясидан олдин fetchSellers thunkимизни яратамиз. Клиентга биз серверда кўрсатган йўлимизни ўтказамиз:

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

Биз учун фақат sellersSlice учун қўшимча редьюсер яратиш қолди. Бу ерда муваффақиятли соровни қайта ишлаш билан чекланамиз. fetchSellers томонидан яратилган барча экшенлар, fetchProducts экшенлари бибир хил бўлади:

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

Эслатиб ўтамиз, ўтган дафт маҳсулотларни олгандамиз, биз жорий стейт қийматини ўзгартирган эдик. Бу ерда биз бир оз бошқа йўлдан фойдаландик ва жуда оддийгина янги қийматни қайтардик, createSlice да хам шундай қилиш мумкин. Шу тариқа биз иккита мақсадга эришдик. Биринчидан, биз маълумотларни олдик, иккинчидан, энди бизда сотиловчилар рўйхатида яна нимадир пайдо бўлиши хақида кафолат йўқ, чунки биз слайсни тўлиқ action.payload қиймати билан қайта ёздик.