Извличане на данни за продавачи в 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 ще създадем нашия thunk fetchSellers. На клиента ще подадем пътя, указан от нас на сървъра:

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

Остава само за sellersSlice да създадем допълнителен reducer. Ще се ограничим тук с обработката на успешна заявка. Всички екшъни, генерирани от fetchSellers, ще бъдат идентични на екшъните от fetchProducts:

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.