Obținerea datelor vânzătorilor în Redux

Să pornim aplicația noastră cu produsele. Vedem că în cardurile cu produse nu sunt afișați vânzătorii. Să îi obținem de la server și să afișăm aceste date. Pentru aceasta va trebui să efectuăm șirul de acțiuni deja familiar.

Pentru început deschideți fișierul server.js. Găsiți vectorul handlers și adăugați în el încă o prelucrare a cererii GET (după prelucrarea GET pentru produse). După cum vedeți, este practic identică:

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

Am prelucrat cererea pe server. Următoarea etapă este ca în fișierul sellersSlice.js să scriem un thunk pentru obținerea datelor de la server. Pentru aceasta importați în el client și createAsyncThunk:

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

Acum vom obține vânzătorii de la server, de aceea îi vom elimina din initialState, lăsând doar paranteze goale:

sellers/sellersSlice.jsconst initialState = []

Iar apoi, înaintea funcției sellersSlice să creăm thunk-ul nostru fetchSellers. Clientului îi vom transmite calea specificată de noi pe server:

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

Ne rămâne doar să pentru sellersSlice să creăm un reducer suplimentar. Ne vom limita aici la prelucrarea cererii cu succes. Toate acțiunile, generate de fetchSellers, vor fi identice cu acțiunile fetchProducts:

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

Vă reamintesc că data trecută, la obținerea produselor, noi modificam valoarea curentă a stării. Aici noi am utilizat o cale ușor diferită și pur și simplu am returnat o nouă valoare, deoarece și în createSlice se poate la fel. Astfel am atins două obiective. În primul rând, am obținut datele, iar în al doilea rând, acum avem garanția că în lista vânzătorilor nu va apărea ceva în plus, deoarece am rescris complet slice-ul cu valoarea action.payload.