Mis on Redux Thunki funktsioon ja kas sellest saab ilma hakkama?

Redux Thunk — see on vahekiht (middleware) Redux jaoks, mis võimaldab kirjutada tegevuste loojaid, mis tagastavad funktsiooni asemel tavalise objekti.

See funktsioon saab argumendid dispatch (teiste tegevuste saatmiseks) ja getState (pääs praegusele salvestise olekule). Thunk-tegevused on kasulikud asünkroonsete operatsioonide, näiteks API-päringute, tegemiseks enne sünkroonse tegevuse saatmist oleku uuendamiseks.

Ilma Redux Thunki (või sarnase middleware'i, näiteks Redux Saga või Redux Observable) tegevuste loojaid tuleb tagastada ainult objektid, mis muudab asünkroonsete operatsioonide otse töötlemise standardse Redux-i raames võimatuks.

Seda saab vältida, kasutades teisi middleware'e, näiteks:

• Redux Saga: kasutab generaatorid asünkroonsete operatsioonide juhtimiseks, pakkudes võimsamat ja testitavamat lähenemist.
• Redux Observable: põhineb RxJS-il, kasutab Observables asünkroonsete andmevoogude juhtimiseks.
• Redux Promise Middleware: automaatselt töötleb lubadusi, saatides tegevusi nende lahendamisel või tagasi lükkamisel.

Valik sõltub asünkroonse loogika keerukusest ja meeskonna eelistustest. Lihtsate juhtumite puhul on Thunk tavaliselt piisav ja lihtne õppida. Keerulisemate stsenaariumide puhul võivad sobivamad olla Saga või Observable.

Näide thunk-tegevusest:

// actions/user.js
import axios from 'axios'; // Näide API päringute teegist

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

// Sünkroonsed tegevuse loojaid
const fetchUserRequest = () => ({
  type: FETCH_USER_REQUEST
});

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

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

// Asünkroonne thunk-tegevus
export const fetchUser = (userId) => {
  return async (dispatch, getState) => {
    dispatch(fetchUserRequest()); // Saada alguslik tegevus
    try {
      const response = await axios.get(`/api/users/${userId}`); // Tee asünkroonne päring
      dispatch(fetchUserSuccess(response.data)); // Saada õnnestumise tegevus andmetega
    } catch (error) {
      dispatch(fetchUserFailure(error.message)); // Saada vea tegevus
    }
  };
};