Redux Saga async / modèle d'attente

Question

Je suis en utilisant async/await tout au long de ma base de code. De ce fait mes appels de l'api sont définies par des fonctions asynchrones

async function apiFetchFoo {
  return await apiCall(...);
}

Je voudrais appeler cette fonction à partir de ma saga code. Il me semble que je ne peux pas faire ceci:

// Doesn't work
function* fetchFoo(action) {
  const results = await apiFetchFoo();
  yield put({type: "FOOS_FETCHED_SUCCESSFULLY", foos: results});
}

Toutefois, cela fonctionne, et correspond à la redux saga de la documentation:

// Does work
function* fetchFoo(action) {
  const results = yield call(apiFetchFoo);
  yield put({type: "FOOS_FETCHED_SUCCESSFULLY", foos: results});
}

Est-ce la bonne façon d'utiliser les Redux Saga côtés async/await? Il est standard pour utiliser ce générateur de la syntaxe à l'intérieur de la saga de code, et la async/await modèle d'ailleurs?

Answer 1

Oui, c'est la manière standard d'utilisation Redux-Saga.

Vous ne devriez jamais appeler l' await fonction directement à l'intérieur de la saga-générateur, parce que redux-saga est pour orchestrer les effets secondaires. Par conséquent, chaque fois que vous voulez exécuter un des effets secondaires que vous devriez le faire en produisant les effets secondaires par l'intermédiaire d'un redux-saga effet (généralement: call ou fork). Si vous le faites directement, sans céder à travers un redux-saga de l'effet, puis redux-saga ne sera pas en mesure d'orchestrer les effets secondaires.

Si vous pensez à ce sujet, le redux-saga générateur est complètement testable sans la nécessité de se moquer de quelque chose. Cela aide aussi à garder les choses découplé: si votre apiFetchFoo retourné une promesse, la saga aurait toujours fonctionner de la même.

Answer 2

Comme l'a souligné Josep, await ne peut pas être utilisé à l'intérieur d'un générateur. Au lieu de cela, vous devez utiliser une fonction async. Aussi, remarque c'est une limitation de l'asynchrone en fonction de lui-même. Il n'est pas imposé par redux-saga.

Au-delà de cela, je voulais aussi mentionner que c'est un choix conscient par le redux-saga les auteurs à ne pas autoriser les développeurs à exprimer des sagas comme async/await fonctions.

Les générateurs sont plus puissants que d' async/await et ils permettent à des fonctionnalités avancées de redux-saga comme co-coordination de tâches en parallèle.

En outre, exprimant des sagas comme les générateurs de nous aider à définir les Effets qui sont de simples objets de la définition de l'effet indésirable. Effets le rend très facile de tester nos sagas.

Ainsi, bien que votre code de travail est bien, peut-être de ne pas mélanger les sagas et de la fonction async est une bonne idée.

Il suffit de définir votre apiFetchFoo de retour d'une promesse qui se résout avec la réponse à la demande. Et quand cela arrive, votre saga reprend avec le results.

 const apiFetchFoo = () =>
   fetch('foo')
     .then(res => res.json())

Answer 3

await fonctionnent toujours dans une fonction déclarée comme async . #thumbRule

 async function fetchList () {
  let resp = await fetchApi([params]);
}