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:

products/productsSlice.jsexport 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:

products/productsSlice.jsexport 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:

products/productsSlice.jsexport 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):

products/productsSlice.js.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.