Jaká je funkce Redux Thunk a lze se bez něj obejít…

Redux Thunk je middleware pro Redux, který umožňuje psát tvůrce akcí, kteří vracejí funkci místo běžného objektu akce.

Tato funkce přijímá argumenty dispatch (pro odeslání dalších akcí) a getState (pro přístup k aktuálnímu stavu úložiště). Thunk akce jsou užitečné pro provádění asynchronních operací, jako jsou požadavky na API, před odesláním synchronní akce k aktualizaci stavu.

Bez Redux Thunk (nebo podobného middleware, například Redux Saga nebo Redux Observable) mohou tvůrci akcí vracet pouze objekty, což znemožňuje přímé zpracování asynchronních operací v standardním Redux.

Můžete se vyhnout Redux Thunk použitím jiných middleware pro vedlejší efekty, například:

Redux Saga: Používá generátory k řízení asynchronních operací, nabízející výkonnější a lépe testovatelný přístup.
Redux Observable: Na základě RxJS, používá Observables k řízení asynchronních toků dat.
Redux Promise Middleware: Automaticky zpracovává promises, dispatchujíc akce při jejich vyřešení nebo odmítnutí.

Volba závisí na složitosti asynchronní logiky a preferencích týmu. Pro jednoduché případy je Thunk obvykle dostačující a jednodušší na naučení. Pro složitější scénáře mohou být vhodnější Saga nebo Observable.

Příklad thunk akce:

// actions/user.js
import axios from 'axios'; // Příklad použití knihovny pro požadavky

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

// Synchronous action creatory
const fetchUserRequest = () => ({
  type: FETCH_USER_REQUEST
});

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

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

// Asynchronous thunk creator akce
export const fetchUser = (userId) => {
  return async (dispatch, getState) => {
    dispatch(fetchUserRequest()); // Odeslání akce začátku požadavku
    try {
      const response = await axios.get(`/api/users/${userId}`); // Provedení asynchronního požadavku
      dispatch(fetchUserSuccess(response.data)); // Odeslání akce úspěchu s daty
    } catch (error) {
      dispatch(fetchUserFailure(error.message)); // Odeslání akce chyby
    }
  };
};

Jaká je funkce Redux Thunk a lze se bez něj obejít?