Je migre mon code de thunk à saga en raison des exigences de mon entreprise. Envoyer des requêtes API en utilisant Thunk avec des paramètres était vraiment facile et j'ai du mal à comprendre comment passer les paramètres ...

1
Karan Kumar 17 mars 2021 à 00:05

2 réponses

Meilleure réponse

Comme le dit @markerikson dans sa réponse, appel vous permet de passer dans les arguments dont vous avez besoin pour la fonction appelée. Donc, si ces arguments sont connus à l'avance pour chaque fois que vous souhaitez exécuter cette saga, vous pouvez simplement faire:

const { data } = yield call(fetchAllItemsRequest, AXIOS_ARGS);

Mais vous demandez comment le faire à partir de l'appel dispatch à l'intérieur de useEffect, comme si vous deviez appeler la même saga (en distribuant le même type d'action) avec des arguments différents.

Dans ce cas, vous pouvez simplement les inclure dans votre "charge utile d'action", puisque takeLatest (et toutes les fonctions similaires) transmet l'action entière à la saga. Vous pouvez donc faire quelque chose comme ça.

Dans le composant:

useEffect(() => {
  dispatch({
    type: FETCH_ALL_ITEMS_REQUEST,
    args: argsINeedForThisRequest
  })
}, [])

Et dans la saga fetchAllItems:

export function* fetchAllItems(action) {
  console.log('MARKET PLACE HANDLER', action);
  try {
    const { data } = yield call(fetchAllItemsRequest, action.args); // use action payload here
    yield put({
      type: FETCH_ALL_ITEMS_SUCCESS,
      payload: data,
    });
  } catch (error) {
    console.log(error, '<== error while saga');
    yield put({
      type: FETCH_ALL_ITEMS_FAIL,
      error: 'Error loading ITEMS list',
    });
  }
}
2
Robin Zigmond 16 mars 2021 à 21:15

L'effet saga call permet de passer des arguments de fonction comme paramètres supplémentaires après la méthode à appeler.

Donc, si vous aviez ceci dans votre code JS d'origine:

axios.post('/some/url', data)

Ce serait ça dans une saga:

yield call(axios.post, '/some/url', data)
0
markerikson 16 mars 2021 à 21:07