Добијање података о продавцима у 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. Ограничимо се овде на обраду успешног захтева. Сви action-и, генерисани од стране fetchSellers, биће идентични action-има 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.