React-Redux: Les actions doivent être des objets simples. Utiliser un middleware personnalisé pour les actions asynchrones

Question

Rejet non géré (erreur): les actions doivent être des objets simples. Utilisez un middleware personnalisé pour les actions asynchrones.

Détails: Je voulais ajouter des commentaires à chaque publication. Ainsi, lorsque les messages fetch sont exécutés, je souhaite appeler l’API de commentaire fetch pour tous les messages.

Voici mon code:

 export function bindComments(postId) {
  return API.fetchComments(postId).then(comments => {
    return {
      type: BIND_COMMENTS,
      comments,
      postId
    }
  })
}
 

Merci

Answer 1

Vous devez envoyer après la fin de la demande asynchrone.

Cela fonctionnerait:

 export function bindComments(postId) {

 return function (dispatch){
   return API.fetchComments(postId).then(comments => {
   // dispatch
     dispatch( {
       type: BIND_COMMENTS,
       comments,
       postId
     })
   })
 }
}
 

Answer 2

Vous ne pouvez pas utiliser fetch dans les actions sans middleware. Les actions doivent être des objets simples. Vous pouvez utiliser un middleware tel que redux-thunk ou redux-saga pour récupérer et envoyer une autre action.

Voici un exemple d'action asynchrone utilisant le middleware redux-thunk.

 export function checkUserLoggedIn (authCode) {
 let url = `${loginUrl}validate?auth_code=${authCode}`;
  return dispatch => {
    return fetch(url,{
      method: 'GET',
      headers: {
        "Content-Type": "application/json"
      }
      }
    )
      .then((resp) => {
        let json = resp.json();
       if (resp.status >= 200 && resp.status < 300) {
          return json;
        } else {
          return json.then(Promise.reject.bind(Promise));
        }
      })
      .then(
        json => {
          if (json.result && (json.result.status === 'error')) {
            dispatch(errorOccurred(json.result));
            dispatch(logOut());
          }
          else{
            dispatch(verified(json.result));
          }
        }
      )
      .catch((error) => {
        dispatch(warningOccurred(error, url));
      })
  }
}
 

Answer 3

Utiliser les fonctions Arrow améliore la lisibilité du code. Pas besoin de renvoyer quoi que ce soit dans API.fetchComments , l'appel Api est asynchrone lorsque la demande est complétée. then obtiendra la réponse; il ne vous reste plus qu'à dispatch type et les données .

Le code ci-dessous fait le même travail en utilisant les fonctions de flèche.

 export const bindComments = postId => {
  return dispatch => {
    API.fetchComments(postId).then(comments => {
      dispatch({
        type: BIND_COMMENTS,
        comments,
        postId
      });
    });
  };
};