Встречается на собеседованиях • сегодня

Как работать с асинхронным кодом в Redux

В Redux для работы с асинхронным кодом используют middleware, чаще всего redux-thunk или redux-saga.

Redux-thunk (проще):

javascript

const fetchData = () => async (dispatch) => {
  dispatch({ type: 'FETCH_START' });
  try {
    const response = await fetch('api/data');
    const data = await response.json();
    dispatch({ type: 'FETCH_SUCCESS', payload: data });
  } catch (error) {
    dispatch({ type: 'FETCH_ERROR', payload: error });
  }
};

Redux-saga (для сложных сценариев):

javascript

function* fetchData() {
  yield put({ type: 'FETCH_START' });
  try {
    const response = yield call(fetch, 'api/data');
    const data = yield response.json();
    yield put({ type: 'FETCH_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_ERROR', payload: error });
  }
}

Основные подходы:

Thunk - функции, которые могут диспатчить экшены
Saga - генераторы для сложных потоков
RTK Query (в Redux Toolkit) - встроенное решение для API-запросов

Для подключения middleware нужно обернуть store при создании:

javascript

const store = createStore(reducer, applyMiddleware(thunk));

Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!

Попробовать бесплатно

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос

пример собеседования

фреймворки на собеседовании

типичные вопросы junior

интервью вопросы и ответы