redux-promesse avec Axios, et comment traiter avec des erreurs?

J'ai dû passer à travers une situation similaire. Le défi est que vous n'aurez probablement pas être en mesure d'évaluer les résultats de la promesse jusqu'à ce qu'il est au réducteur. Vous pourrait gérer vos exceptions il y en a mais c'est pas le meilleur modèle. De ce que j'ai lu les réducteurs sont destinés uniquement pour retourner pièces appropriées de l'état fondée sur l'action.type et ne rien faire d'autre.

Entrez un middleware, redux-thunk. Au lieu de retourner un objet, il retourne une fonction, et il peut coexister avec la promesse.

C'est expliqué assez bien à http://danmaz74.me/2015/08/19/from-flux-to-redux-async-actions-the-easy-way/ [archivé ici]. Essentiellement, vous pouvez évaluer la promesse d'ici et d'envoi par l'autre action créateurs avant que la promesse les résultats de la réducteurs.

Dans vos actions de fichiers, d'ajouter des mesures supplémentaires créateurs qui permettrait de gérer le succès et l'erreur (et tous les autres).

function getStuffSuccess(response) {
  return {
    type: GET_ME_STUFF_SUCCESS,
    payload: response
  }
}

function getStuffError(err) {
  return {
    type: GET_ME_STUFF_ERROR,
    payload: err
  }
}

export function getStuff() {
  return function(dispatch) {
    axios.get(SOME_URL)
      .then((response) => {
        dispatch(getStuffSuccess(response))
      })
      .catch((err) => {
        dispatch(getStuffError(err))
      })
  }
}

return null

C'est à peu près à ce que vous pouvez traduire votre pseudo pour ce qui est expliqué dans le lien. Elle traite de l'évaluation de la promesse directement dans votre action de créateur et de tirer les actions appropriées et les charges de votre réducteurs qui suit la convention de l'action -> réducteur ->- > mise à jour des composants cycle. Je suis encore assez nouveau pour Réagir/Redux moi-même, mais j'espère que cette aide.

OriginalL'auteur Victor

Il ressemble, vous pouvez intercepter l'erreur où vous faites l'envoi, puis de faire une erreur séparée d'expédition si cela arrive. C'est un peu un hack, mais il fonctionne.

  store.dispatch (function (dispatch) {
      dispatch ({
        type:'FOO',
        payload:axios.get(url)
      })
      .catch (function(err) {
        dispatch ({
          type:"FOO" + "_REJECTED",
          payload:err
        });
      });
  });

et dans le réducteur

const reducer = (state=initialState, action) => {
  switch (action.type) {
    case "FOO_PENDING": {
      return {...state, fetching: true};
    }
    case "FOO_REJECTED": {
      return {...state, fetching: false, error: action.payload};
    }
    case "FOO_FULFILLED": {
      return {
        ...state,
        fetching: false,
        fetched: true,
        data: action.payload,
      };
    }
  }
  return state;
};

OriginalL'auteur bruce

Cela pourrait ne pas être la meilleure approche, mais cela fonctionne pour moi. Je vous passe le " il " de mon composant var contexte. Alors quand je reçois la réponse de retour je viens d'exécuter les méthodes définies dans mes composants contexte. Dans mon composant, j'ai successHdl et errorHdl. À partir de là, je peux déclencher plus de redux actions que la normale. J'ai vérifié toutes les réponses précédentes et semble trop ardue pour une telle tâche triviale.

export function updateJob(payload, context){

    const request = axios.put(UPDATE_SOMETHING, payload).then(function (response) {
        context.successHdl(response);
    })
    .catch(function (error) {
        context.errorHdl(error);
    });;

    return {
        type: UPDATE_SOMETHING,
        payload: payload,
    }
}

OriginalL'auteur Roberto Aguilar