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:

http.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:

import { 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:

const initialState = []

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

export 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:

const 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.

Abra sua aplicação com os alunos. Abra o arquivo server.js nela, adicione ao array handlers mais um manipulador para a requisição GET de professores.

Agora abra o arquivo teachersSlice.js. Torne o initialState um array vazio, como mostrado na lição. Antes da função studentsSlice escreva o thunk fetchTeachers.

Na função createSlice, adicione um redutor extra, limitando-se ao tratamento da requisição bem-sucedida.