Obtenção de dados de vendedores no Redux

Vamos iniciar nossa aplicação com produtos. Vemos que nos cartões de produtos os vendedores não são exibidos. Vamos obter esses dados do servidor e exibi-los. Para isso, precisaremos realizar a sequência de ações já familiar.

Para começar, abra o arquivo server.js. Encontre o array handlers e adicione mais uma tratamento para a requisição GET (após o tratamento GET para produtos). Como você pode ver, é praticamente idêntico:

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

Processamos a requisição no servidor. A próxima etapa é no arquivo sellersSlice.js, onde devemos escrever um thunk para obter os dados do servidor. Para isso, importe client e createAsyncThunk nele:

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

Agora que obteremos os vendedores do servidor, removê-los-emos do initialState, deixando apenas colchetes vazios:

sellers/sellersSlice.jsconst initialState = []

E então, antes da função sellersSlice criaremos nosso thunk fetchSellers. Passaremos ao cliente o caminho que especificamos no servidor:

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

Só nos resta criar um redutor extra para o sellersSlice. Vamos nos limitar aqui ao tratamento da requisição bem-sucedida. Todas as actions geradas por fetchSellers serão idênticas às actions de fetchProducts:

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

Lembro que da última vez, ao obter os produtos, alteramos o valor atual do estado. Aqui nós seguimos um caminho um pouco diferente e simplesmente retornamos um novo valor, pois em createSlice também é possível fazer isso. Dessa forma, alcançamos dois objetivos. Primeiro, obtivemos os dados e, segundo, agora temos a garantia de que nada mais aparecerá na lista de vendedores, pois substituímos completamente o slice pelo valor de action.payload.