web-dev-qa-db-fra.com

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

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

reactjsreact-redux
32
Rajib Ahmed

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
     })
   })
 }
}
32
sadiq

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));
      })
  }
}
2
Sinapcs

Utiliser les fonctions de flèche améliore la lisibilité du code. Nul 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 restera plus que dispatch à saisir 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
      });
    });
  };
};
2
Amruth LS