Wat is de functie van Redux Thunk en is het mogelijk om zonder te werken?

Redux Thunk is een middleware voor Redux waarmee je actie-creator functies kunt schrijven die in plaats van een gewoon actie-object, een functie teruggeven.

Deze functie ontvangt de argumenten dispatch (om andere acties te versturen) en getState (om toegang te krijgen tot de huidige staat van de store). Thunk-acties zijn handig voor het uitvoeren van asynchrone operaties, zoals API-aanvragen, voordat een synchrone actie wordt verstuurd om de staat bij te werken.

Zonder Redux Thunk (of vergelijkbare middleware zoals Redux Saga of Redux Observable) kunnen actie-creator functies alleen objecten teruggeven, wat directe afhandeling van asynchrone operaties in standaard Redux onmogelijk maakt.

Je kunt zonder Redux Thunk werken door andere middleware voor side-effects te gebruiken, zoals:

• Redux Saga: Gebruikt generators om asynchrone operaties te beheren, en biedt een krachtigere en testbare aanpak.
• Redux Observable: Gebaseerd op RxJS, gebruikt Observables om asynchrone datastromen te beheren.
• Redux Promise Middleware: Behandelt promises automatisch en dispatcht acties bij resolutie of afwijzing.

De keuze hangt af van de complexiteit van de asynchrone logica en de voorkeuren van het team. Voor eenvoudige gevallen is Thunk meestal voldoende en makkelijker te leren. Voor complexere scenario's kunnen Saga of Observable geschikter zijn.

Voorbeeld van een thunk-actie:

// actions/user.js
import axios from 'axios'; // Voorbeeld van het gebruik van een bibliotheek voor verzoeken

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

// Synchrone actiecreators
const fetchUserRequest = () => ({
  type: FETCH_USER_REQUEST
});

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

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

// Asynchrone thunk-actie creator
export const fetchUser = (userId) => {
  return async (dispatch, getState) => {
    dispatch(fetchUserRequest()); // Verzend startactie
    try {
      const response = await axios.get(`/api/users/${userId}`); // Voer asynchrone aanvraag uit
      dispatch(fetchUserSuccess(response.data)); // Verzend succesactie met gegevens
    } catch (error) {
      dispatch(fetchUserFailure(error.message)); // Verzend foutactie
    }
  };
};