Aká je funkcia Redux Thunk a dá sa bez neho žiť?

Redux Thunk je middleware pre Redux, koji omogućava pisanje tvoraca akcija koji vraćaju funkciju umesto običnog objekta akcije.

Ova funkcija prima argumente dispatch (za slanje drugih akcija) i getState (za pristup trenutnom stanju skladišta). Thunk akcije su korisne za izvršavanje asinhronih operacija, kao što su zahtevi API-ju, pre slanja sinhronih akcija za ažuriranje stanja.

Bez Redux Thunk (ili sličnog middleware-a, poput Redux Saga ili Redux Observable) tvorci akcija moraju vraćati samo objekte, što onemogućava direktnu obradu asinhronih operacija u standardnom Redux-u.

Može se izbeći korišćenjem drugih middleware-a za side-efekte, kao što su:

• Redux Saga: koristi generatore za upravljanje asinhronim operacijama, nudeći moćniji i testiraniji pristup.
• Redux Observable: zasnovan na RxJS, koristi Observables za upravljanje asinhronim tokovima podataka.
• Redux Promise Middleware: automatski obrađuje promise, distribuirajući akcije pri njihovom rešavanju ili odbijanju.

Izbor zavisi od složenosti asinhronih logika i preferencija tima. Za jednostavne slučajeve, Thunk je obično dovoljan i lakši za učenje. Za složenije scenarije, Saga ili Observable mogu biti pogodniji.

Primer thunk akcije:

// actions/user.js
import axios from 'axios'; // Primer korišćenja biblioteke za zahteve

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

// Sinhroni tvorci akcija
const fetchUserRequest = () => ({
  type: FETCH_USER_REQUEST
});

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

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

// Asinhroni thunk-tvorac akcije
export const fetchUser = (userId) => {
  return async (dispatch, getState) => {
    dispatch(fetchUserRequest()); // Šaljemo akciju početka zahteva
    try {
      const response = await axios.get(`/api/users/${userId}`); // Izvršavamo asinhroni zahtev
      dispatch(fetchUserSuccess(response.data)); // Šaljemo akciju uspeha sa podacima
    } catch (error) {
      dispatch(fetchUserFailure(error.message)); // Šaljemo akciju greške
    }
  };
};