Redux Thunk-ի գործառույթը ինչ է և կարելի է առանց դրա ապրել?

Redux Thunk — դա միջնորդական ծրագրակազմ (middleware) է Redux-ի համար, որը թույլ է տալիս գրել գործողությունների ստեղծողներ, որոնք վերադարձնում են ֆունկցիա փոխարեն սովորական օբյեկտի:

Այս ֆունկցիան ստանում է dispatch (այլ գործողություններ ուղարկելու համար) և getState (պահեստի ընթացիկ վիճակին մուտք գործելու համար) արգումենտները: Thunk-գործողությունները օգտակար են ասինխրոն գործողություններ կատարելու համար, ինչպիսիք են API-ներին հարցումներ ուղարկելը, նախքան սինխրոն գործողություն ուղարկելն՝ վիճակը թարմացնելու համար:

Անվճար Redux Thunk (կամ նման middleware, օրինակ՝ Redux Saga կամ Redux Observable) օգտագործելու դեպքում, գործողությունների ստեղծողները պետք է վերադարձնեն միայն օբյեկտներ, ինչը չի թույլատրում ուղիղ աշխատել ասինխրոն գործողությունների հետ՝ սովորական Redux-ում:

Այն կարելի է շրջանցել՝ օգտագործելով այլ middleware-ներ՝ side-էֆեկտների համար, ինչպիսիք են՝

• Redux Saga: օգտագործում է գեներատորներ՝ ասինխրոն գործողությունները կառավարելու համար, առաջարկելով ավելի հզոր և թեստավորելի մոտեցում:
• Redux Observable: հիմնված RxJS-ի վրա, օգտագործում է Observables՝ ասինխրոն տվյալների հոսքերը կառավարելու համար:
• Redux Promise Middleware: ավտոմատ կերպով մշակվում են պրոմիսները, գործողություններ ուղարկելով՝ դրանց լուծում կամ մերժումից հետո:

Ընտրությունը կախված է ասինխրոն լոգիկայի բարդությունից և թիմի նախընտրություններից: Պարզ դեպքերում Thunk-ը սովորաբար բավական է և հեշտ է սովորել: Կարծր դեպքերում՝ Saga կամ Observable-ը կարող են ավելի հարմար լինել:

Նմուշ՝ thunk-գործողություն:

// actions/user.js
import axios from 'axios'; // Օրինակ՝ գրադարանի օգտագործում API հարցումների համար

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

// Սինխրոն գործողությունների ստեղծողներ
const fetchUserRequest = () => ({
  type: FETCH_USER_REQUEST
});

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

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

// Ասինխրոն thunk-գործողություն ստեղծող
export const fetchUser = (userId) => {
  return async (dispatch, getState) => {
    dispatch(fetchUserRequest()); // Ուղարկում ենք սկսելու գործողություն
    try {
      const response = await axios.get(`/api/users/${userId}`); // Ասինխրոն հարցում
      dispatch(fetchUserSuccess(response.data)); // Ուղարկում ենք հաջողության գործողություն տվյալներով
    } catch (error) {
      dispatch(fetchUserFailure(error.message)); // Ուղարկում ենք սխալի գործողություն
    }
  };
};