Sobes.tech
Middle

Koja je funkcija Redux Thunk i da li se od nje može odustati?

sobes.tech АИ

Одговор од АИ

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'; // Пример коришћења библиотеке за захтеве

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)); // Пошаљи акцију грешке
    }
  };
};