Introdução a thunks no Redux

No capítulo anterior, organizamos o funcionamento do servidor, banco de dados e cliente para troca de dados. Agora precisamos fazer a última ponte, que ajudará nossa aplicação Redux, organizada de forma 'síncrona', a interagir com o cliente assíncrono que criamos na última lição do capítulo anterior, para enviar solicitações e obter os dados necessários na resposta.

Como lembramos das primeiras lições da seção anterior, o Redux não sabe nada sobre como trabalhar com lógica assíncrona e, para isso, usaremos o middleware thunk. Este middleware permite trabalhar com actions enviadas, usar os métodos dispatch e getState da store no código do nosso thunk, e também ajudar o método dispatch a trabalhar não apenas com objetos JS comuns, mas também com entidades como funções e promises.

Geralmente, a função thunk é chamada com dois argumentos, dispatch e getState (se necessário), que podem ser usados no corpo dessa função. Com ela, é possível despachar actions regulares. Também é possível enviá-la via store.dispatch. Um exemplo de tal função é mostrado abaixo:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Cor Antiga: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Cor Nova: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Agora, vamos abrir nossa aplicação de produtos. A primeira coisa que devemos obter do servidor ao iniciar a aplicação é a lista de produtos. Como geralmente os thunks são escritos nos arquivos de slice, abriremos o arquivo productsSlice.js.

A boa notícia é que não precisamos nos preocupar em instalar o Redux Thunk, pois a função configureStore do RTK já fará isso por nós. Portanto, simplesmente adicionaremos createAsyncThunk na importação no arquivo:

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

Vamos adicionar também nosso cliente na importação:

import { client } from '../../api/client'

E agora, usando createAsyncThunk, criaremos nosso primeiro thunk para obter os produtos. Faremos isso logo após a declaração do objeto initialState:

export const fetchProducts = createAsyncThunk()

O primeiro parâmetro de createAsyncThunk será uma string para o tipo da action gerada, e o segundo será uma função de callback para payload, que retornará ou os dados ou uma promise com erro (consulte o arquivo client.js). No código da função, chamamos client.get e passamos o caminho que especificamos no servidor (verifique os parâmetros aceitos por http.get em server.js):

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

Abra sua aplicação de estudantes. Abra nela o arquivo studentsSlice.js. Importe para ele a função createAsyncThunk para criar o thunk, e também o client para enviar requisições de API para o servidor.

Imediatamente após a declaração do objeto initialState, use createAsyncThunk para criar o thunk fetchStudents para obter a lista de estudantes, que enviará uma requisição GET para o endereço /fakeServer/students, especificado em seu arquivo server.js, e retornará response.data, conforme mostrado nos materiais da lição. Como primeiro parâmetro para createAsyncThunk, especifique a string students/fetchStudents para o tipo da action.