Enviando dados usando thunk no Redux

Na lição anterior, exploramos como processar uma requisição POST no nosso servidor simulado. Vamos agora escrever uma função thunk que irá enviar a requisição para o servidor.

Vamos abrir nosso aplicativo de produtos, e no seu arquivo productsSlice.js. Agora, após o thunk fetchProducts, vamos usar createAsyncThunk para criar o thunk addProduct:

export const addProduct = createAsyncThunk()

Como primeiro parâmetro para createAsyncThunk, passaremos 'products/addProduct', e como segundo, um callback assíncrono, que receberá um objeto com os dados do novo produto:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

No código deste callback, vamos chamar o cliente, passando como parâmetros o caminho e o objeto com o produto, e então retornaremos os dados da resposta:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {
		const response = await client.post('/fakeServer/products', newProduct)
		return response.data
	}
)

Agora, abaixo no código, vamos olhar para o campo reducers do productsSlice. Antes, nós adicionávamos um novo produto usando o redutor productAdded, no qual tínhamos os métodos reducer e prepare. Agora estamos gerando os dados necessários no servidor e trabalhando com thunk, então vamos remover completamente o redutor productAdded daqui. E então adicionaremos no método extraReducers (no final do seu código) mais um redutor adicional, que, no caso de uma requisição bem-sucedida, adicionará ao slice products o novo produto diretamente do payload da action (lembre-se, esse código é possível graças ao incomparável createSlice):

.addCase(addProduct.fulfilled, (state, action) => {
	state.products.push(action.payload)
})

Ah, e não se esqueça de remover o nanoid das linhas de importação, e o productAdded da exportação das actions no final do arquivo.

Abra seu aplicativo de estudantes. Abra nele o arquivo studentsSlice.js. Usando o createAsyncThunk, crie outro thunk addStudent, que enviará uma requisição POST para o servidor para adicionar um novo estudante, como mostrado na lição.

Em seguida, mais abaixo, faça as alterações para o studentsSlice: remova completamente o redutor studentAdded na propriedade reducers. E no campo extraReducers adicione um redutor adicional, que adicionará um novo estudante ao slice students a partir do payload da action no caso de uma requisição bem-sucedida, como mostrado na lição.