Redux Thunk-un funksiyası nədir və ondan imtina etmək mümkündürmü?

Redux Thunk, Redux üçün middleware-dir və bu, hərəkət yaradanların adi obyekt yerinə funksiya qaytarmasına imkan verir.

Bu funksiya dispatch (digər hərəkətləri göndərmək üçün) və getState (hazırkı vəziyyətə daxil olmaq üçün) arqumentlərini alır. Thunk hərəkətləri, API sorğuları kimi asinxron əməliyyatları yerinə yetirmək üçün faydalıdır və sinxron hərəkət göndərmədən əvvəl vəziyyəti yeniləməyə imkan verir.

Redux Thunk (və ya Redux Saga və ya Redux Observable kimi oxşar middleware) olmasa, hərəkət yaradanlar yalnız obyektlər qaytara bilər, bu da standart Redux-da asinxron əməliyyatların birbaşa idarə olunmasını mümkün etmir.

Redux Thunk-dən imtina etmək üçün digər middleware-lərdən istifadə etmək mümkündür, məsələn:

• Redux Saga: Generatorlardan istifadə edərək, asinxron əməliyyatları idarə edir və daha güclü və test edilə bilən yanaşma təklif edir.
• Redux Observable: RxJS-ə əsaslanır, Observables istifadə edərək asinxron məlumat axınlarını idarə edir.
• Redux Promise Middleware: Promisleri avtomatik idarə edir və onların həll olunması və ya rədd edilməsi zamanı hərəkətləri dispatch edir.

Seçim, asinxron loqikanın mürəkkəbliyinə və komandanın üstünlüklərinə bağlıdır. Sadə hallarda Thunk adətən kifayət edir və öyrənməsi asandır. Çətin ssenarilər üçün Saga və ya Observable daha uyğun ola bilər.

Thunk hərəkət nümunəsi:

// actions/user.js
import axios from 'axios'; // Sorğular üçün kitabxanadan nümunə

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

// Sinxron hərəkət yaradanlar
const fetchUserRequest = () => ({
  type: FETCH_USER_REQUEST
});

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

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

// Asinxron thunk hərəkət yaradan
export const fetchUser = (userId) => {
  return async (dispatch, getState) => {
    dispatch(fetchUserRequest()); // Sorğunun başlanğıcını göndəririk
    try {
      const response = await axios.get(`/api/users/${userId}`); // Asinxron sorğu yerinə yetirilir
      dispatch(fetchUserSuccess(response.data)); // Uğurlu hərəkət göndərilir
    } catch (error) {
      dispatch(fetchUserFailure(error.message)); // Xəta hərəkəti göndərilir
    }
  };
};