¿Cuál es la función de Redux Thunk y se puede prescindir de él?

Redux Thunk es un middleware para Redux que permite escribir creadores de acciones que devuelven una función en lugar de un objeto de acción normal.

Esta función recibe los argumentos dispatch (para enviar otras acciones) y getState (para acceder al estado actual del almacén). Las acciones thunk son útiles para realizar operaciones asíncronas, como solicitudes a APIs, antes de enviar una acción sincrónica para actualizar el estado.

Sin Redux Thunk (o middleware similar, como Redux Saga o Redux Observable), los creadores de acciones solo pueden devolver objetos, lo que hace que el manejo de operaciones asíncronas en Redux estándar sea imposible.

Se puede prescindir de Redux Thunk usando otros middleware para efectos secundarios, como:

• Redux Saga: Utiliza generadores para gestionar operaciones asíncronas, ofreciendo un enfoque más potente y testeable.
• Redux Observable: Basado en RxJS, usa Observables para gestionar flujos de datos asíncronos.
• Redux Promise Middleware: Maneja automáticamente promesas, despachando acciones cuando se resuelven o rechazan.

La elección depende de la complejidad de la lógica asíncrona y las preferencias del equipo. Para casos simples, Thunk suele ser suficiente y más fácil de aprender. Para escenarios complejos, Saga o Observable pueden ser más adecuados.

Ejemplo de acción thunk:

// actions/user.js
import axios from 'axios'; // Ejemplo de uso de librería para solicitudes

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

// Creadores de acciones sincrónicas
const fetchUserRequest = () => ({
  type: FETCH_USER_REQUEST
});

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

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

// Creador de acción thunk asíncrono
export const fetchUser = (userId) => {
  return async (dispatch, getState) => {
    dispatch(fetchUserRequest()); // Enviamos acción de inicio de solicitud
    try {
      const response = await axios.get(`/api/users/${userId}`); // Realizamos solicitud asíncrona
      dispatch(fetchUserSuccess(response.data)); // Enviamos acción de éxito con datos
    } catch (error) {
      dispatch(fetchUserFailure(error.message)); // Enviamos acción de error
    }
  };
};