Правильно ли возвращать данные запросы в action

Question

Правильно ли возвращать данные запросы в action

Тип вопроса: Архитектура Вероятность: 10% Категория: Frontend Разработчик

Ответ

Да, возвращать данные запроса в action — это нормальная практика, особенно в Redux или аналогичных библиотеках. Это позволяет обрабатывать результат асинхронного запроса в редьюсере или компоненте.

Пример с Redux Thunk:

const fetchUser = (userId) => async (dispatch) => {
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();
  dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
  return data; // Возвращаем данные для дальнейшей обработки
};

// В компоненте можно использовать так:
dispatch(fetchUser(1)).then((userData) => {
  console.log('User data:', userData);
});

Плюсы:

Удобно для цепочки действий (then/await).
Позволяет использовать данные сразу после диспатча.

Минусы:

Может усложнить логику, если злоупотреблять.
Не всегда нужно, если данные хранятся в сторе.

Используй, когда нужен доступ к данным вне стора (например, для навигации или локального состояния).

Ответ 18+ 🔞

А, ну ты глянь, классический вопрос про возврат данных из экшена! Это ж как сходить в магазин за пивом — можно просто принести и поставить в холодильник (диспатчнуть в стор), а можно сразу одну баночку открыть и хлопнуть, пока идёшь обратно (вернуть данные для немедленного использования).

Так вот, возвращать данные из action — это абсолютно легально, особенно когда работаешь с Redux Thunk или чем-то подобным. Это как оставить себе чек из магазина — вдруг пригодится.

Смотри, вот тебе живой пример, как это выглядит в коде:

const fetchUser = (userId) => async (dispatch) => {
  // Идём на сервер, как на разведку
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();
  // Кладём добычу в общий котёл (стор)
  dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
  return data; // А вот и наш чек! Возвращаем данные, чтобы могли ими сразу воспользоваться.
};

// И в компоненте можно сделать такую красоту:
dispatch(fetchUser(1)).then((userData) => {
  console.log('Ну вот и данные, свеженькие:', userData);
  // Тут же, не отходя от кассы, их и используем.
});

Чем это, блядь, хорошо:

Удобство для цепочек. Можно строить последовательности действий, как паровозик (then или await). Сделал запрос — получил данные — сразу пошёл дальше их обрабатывать. Логика течёт, как по маслу.
Мгновенный доступ. Не нужно ждать, пока данные просочатся через стор и селекторы. Получил их прямо в руки, в той же функции, и делай что хочешь.

А где собака, сука, зарывается:

Можно усложнить себе жизнь. Если начать везде таскать данные таким образом, логика превратится в спагетти, где всё зависит от промисов. А потом сиди и гадай, откуда пришли данные — из стора или из возврата экшена.
Часто это и не нужно. Если данные тебе нужны только чтобы положить их в стор и потом отрендерить — зачем их возвращать? Стор — твой главный источник правды, пусть он всем и заправляет.

Так когда же этим пользоваться? Да когда тебе эти данные нужны здесь и сейчас, прямо в момент вызова, для чего-то локального. Например:

Получил юзера — и сразу, не дожидаясь обновления стора, перенаправляешь его на другую страницу.
Отправил форму — и тут же показываешь всплывашку "Успех!" на основе ответа сервера, пока стор ещё не обновился.

Короче, инструмент как молоток. Можно гвоздь забить, а можно по пальцу получить. Используй с умом, и будет тебе счастье.