Правильно ли собрана сага в redux-saga?

Question

[n1ksON]

saga.js:

import { call, put, takeLatest } from 'redux-saga/effects'

function* fetchUser(action) {
  try {
    const query = yield call(async () => { 
/* 
больше всего интересует именно call, изначально было написано так:

const query = yield call(() => {
  return fetch('https://api.themoviedb.org/3/movie/top_rated?api_key=<<api_key>>&language=ru&page=1')
  .then(response => response.json())
  .then(result => result);
});

потом VSCode предложил сделать автозамену, и получилось то что ниже. 
Мне кажется это бред, ведь сага и так асинхронно выполняется, верно?
*/
      const response = await fetch('https://api.themoviedb.org/3/movie/top_rated?api_key=<<api_key>>&language=ru&page=1');
      const result = await response.json();
      return result;
    });
    yield put({ type: "USER_FETCH_SUCCEEDED", result: query });
  } catch (e) {
    yield put({ type: "USER_FETCH_FAILED", message: e.message });
  }
}

function* saga() {
  yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
}

export default saga;

Вопрос в коде. Правильно ли написана сага была или правильной стала? Или вообще оба варианта неверны?
Не ругайтесь, первый раз сагу пишу, только доку попытался прочитать.

Answer 1

[abberati]

Эти куски кода абсолютно эквивалентны. Только поэтому редактор и смог предложить замену.

Comments

[n1ksON]

странно, ведь redux-saga и так обеспечивает асинхронные запросы. а редактор предлагает асинхронность в асинхронности.
но на основной вопрос я ответ-то не получил, правильно ли написана сага?

[abberati]

redux-saga предоставляет удобный инструментарий по работе с асинхронным кодом. Эта библиотека запускает ваш асинхронный код.

Давайте по частям.
Вот два варианта написания одной и той же асинхронной функции:

const myAsyncFunc = () => {
  return fetch(...)
    .then(response => response.json())
    .then(result => result);
}

const myAsyncFunc = async () => {
  const response = await fetch(...);
  const result = await response.json();
  return result;
}

Эти две фукнции абсолютно эквивалентны. Чем асинхронные функции отличаются от синхронных и почему эти две эквивалентны (они обе асинхронные и делают одно и то же), читайте на learn.javascript.ru.

Далее, вот код функции-генератора (которая в терминологии redux-saga называется сагой):

function* fetchUser(action) {
  try {
    const query = yield call(myAsyncFunction);
    yield put({ type: "USER_FETCH_SUCCEEDED", result: query });
  } catch (e) {
    yield put({ type: "USER_FETCH_FAILED", message: e.message });
  }
}

Как видишь, в эффект call передаётся асинхронная функция myAsyncFunction, которую мы описали выше. Любая из двух, они эквивалентны.

call делает вот что: вызывает переданную в него функцию и проверяет, что вернулось

• если вернулся промис, значит функция асинхронная и нужно подождать, пока промис не разрешится, а затем вернуть значение, с которым разрешился промис
  
• если вернулся не промис, значит функция синхронная и ничего ждать не нужно, просто вернуть значение
  

И ещё раз – redux-saga предоставляет инструментарий для работы с асинхронным кодом, она не предоставляет никакой "асинхронности". Да и понятия такого нет, асинхронность – это качество кода, а не какая-то конкретная "штука".

[n1ksON]

abberati, спасибо за развёрнутый ответ. Я неправильно понимал смысл саги, думал что она уже является асинхронной.
Теперь разобрался, ещё раз большое спасибо!

[abberati]

n1ksON, на самом деле саги тоже асинхронные. Но в другом смысле. Советую углубиться в функции-генераторы. В озвученном выше учебнике про них очень хорошо рассказано.