Redux Thunk ning vazifasi nima va undan voz kechish mumkinmi?

Redux Thunk — bu Redux uchun middleware bo‘lib, u harakat yaratuvchilariga oddiy obyekt o‘rniga funktsiya qaytarishga imkon beradi.

Ushbu funksiya dispatch (boshqa harakatlarni yuborish uchun) va getState (hozirgi holatga kirish uchun) argumentlarini oladi. Thunk harakatlari asinxron operatsiyalarni, masalan, API so‘rovlarini bajarish uchun foydalidir, ular sinxron harakat yuborishdan oldin holatni yangilash uchun.

Redux Thunk (yoki Redux Saga yoki Redux Observable kabi o‘xshash middleware) bo‘lmasa, harakat yaratuvchilar faqat obyektlarni qaytarishi mumkin, bu esa Reduxda to‘g‘ridan-to‘g‘ri asinxron operatsiyalarni boshqarishni imkonsiz qiladi.

Redux Thunk’dan voz kechish uchun, boshqa middleware’lardan foydalanish mumkin, masalan:

• Redux Saga: Generatorlardan foydalanib, asinxron operatsiyalarni boshqaradi, yanada kuchli va test qilish osonroq yondashuvni taklif qiladi.
• Redux Observable: RxJS asosida, Observables yordamida asinxron ma’lumot oqimlarini boshqaradi.
• Redux Promise Middleware: Promislarni avtomatik ravishda boshqaradi va ularning hal bo‘lishi yoki rad etilishi bilan harakatlarni dispatch qiladi.

Tanlov, asinxron mantiqning murakkabligiga va jamoa afzalliklariga bog‘liq. Oddiy holatlar uchun Thunk odatda yetarli va o‘rganish oson. Murakkab holatlar uchun Saga yoki Observable ko‘proq mos keladi.

Thunk harakatining misoli:

// actions/user.js
import axios from 'axios'; // So‘rovlar uchun kutubxonadan foydalanish misoli

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 harakat yaratuvchilar
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 harakat yaratuvchisi
export const fetchUser = (userId) => {
  return async (dispatch, getState) => {
    dispatch(fetchUserRequest()); // So‘rov boshlanishi harakatini yuborish
    try {
      const response = await axios.get(`/api/users/${userId}`); // Asinxron so‘rov bajarish
      dispatch(fetchUserSuccess(response.data)); // Muvaffaqiyatli harakat yuborish
    } catch (error) {
      dispatch(fetchUserFailure(error.message)); // Xato harakatini yuborish
    }
  };
};