Добивање на податоци за продавачи во 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 тоа е можно. На тој начин постигнавме две цели. Прво, ги добивме податоците, а второ, сега имаме гаранција дека во листата на продавачи нема да се појави нешто друго, бидејќи целосно ја пребришавме таблата со вредноста action.payload.