Qual é a função do Redux Thunk e é possível viver sem ele?

Redux Thunk é um middleware para Redux que permite escrever criadores de ações que retornam uma função em vez de um objeto de ação normal.

Esta função recebe os argumentos dispatch (para enviar outras ações) e getState (para aceder ao estado atual do armazenamento). As ações thunk são úteis para realizar operações assíncronas, como pedidos a APIs, antes de enviar uma ação síncrona para atualizar o estado.

Sem Redux Thunk (ou middleware semelhante, como Redux Saga ou Redux Observable), os criadores de ações só podem devolver objetos, o que torna a gestão de operações assíncronas no Redux padrão impossível.

Pode prescindir do Redux Thunk usando outros middlewares para efeitos secundários, tais como:

• Redux Saga: Utiliza geradores para gerir operações assíncronas, oferecendo uma abordagem mais poderosa e testável.
• Redux Observable: Baseado em RxJS, usa Observables para gerir fluxos de dados assíncronos.
• Redux Promise Middleware: Gerencia automaticamente promessas, despachando ações quando estas são resolvidas ou rejeitadas.

A escolha depende da complexidade da lógica assíncrona e das preferências da equipa. Para casos simples, o Thunk costuma ser suficiente e mais fácil de aprender. Para cenários complexos, Saga ou Observable podem ser mais adequados.

Exemplo de ação thunk:

// actions/user.js
import axios from 'axios'; // Exemplo de uso de biblioteca para pedidos

export const FETCH_USER_REQUEST = 'FETCH_USER_REQUEST';
export const FETCH_USER_SUCCESS = 'FETCH_USER_SUCCESS';
export const FETCH_USER_FAILURE = 'FETCH_USER_FAILURE';

// Criadores de ações síncronas
const fetchUserRequest = () => ({
  type: FETCH_USER_REQUEST
});

const fetchUserSuccess = (user) => ({
  type: FETCH_USER_SUCCESS,
  payload: user
});

const fetchUserFailure = (error) => ({
  type: FETCH_USER_FAILURE,
  payload: error
});

// Criador de ação thunk assíncrono
export const fetchUser = (userId) => {
  return async (dispatch, getState) => {
    dispatch(fetchUserRequest()); // Envia ação de início da requisição
    try {
      const response = await axios.get(`/api/users/${userId}`); // Faz uma requisição assíncrona
      dispatch(fetchUserSuccess(response.data)); // Envia ação de sucesso com os dados
    } catch (error) {
      dispatch(fetchUserFailure(error.message)); // Envia ação de erro
    }
  };
};