Comment puis-je faire une requête HTTP à réagir-redux?

Je suis juste de commencer à réagir et je suis un peu perdu. Je suis en train de faire une page de login et de faire une requête http post. Droit maintenant, je suis juste essayer d'obtenir n'importe quel type de requête HTTP de travail, donc je suis en utilisant la demande de la corbeille et j'ai trouvé cette action de base dans les docs pour un package npm (https://www.npmjs.com/package/redux-react-fetch):

export function updateTicket(ticketId, type, value){
  return {
    type: 'updateArticle',
    url: `http://requestb.in/1l9aqbo1`,
    body: {
      article_id: ticketId,
      title: 'New Title'
    },
    then: 'updateTicketFinished'
  }
}

Donc, après avoir écrit une action, que dois-je faire? Comment puis-je obtenir effectivement mon application pour appeler et d'utiliser cette action? La documentation du package npm mentionner quelque chose sur la définition d'un état dans mon magasin, c'est quelque chose j'ai besoin pour mettre en place?

Je n'ai pas utilisé la bibliothèque que vous mentionnez, mais je vous recommande de regarder les vidéos gratuites sur la tête d'oeuf sur Redux. Vous apprendrez tout ce dont vous avez besoin pour commencer à partir du créateur lui-même, y compris la façon de faire appel http. Vous n'avez vraiment pas besoin d'une autre abstraction pour ce faire, tête d'oeuf.io/cours/getting-started-avec-redux tête d'oeuf.io/cours/...
Ici sont les docs de ce que vous essayez de faire. Fondamentalement, vous avez besoin de faire deux choses. Tout d'abord, le coup d'envoi d'une requête ajax (à l'aide de ce que vous voulez, fetch ou jQuery par exemple) lorsque vous appelez à l'action. Ce sera plus susceptible de se produire dans l'action elle-même. La prochaine chose que vous devez faire est de mettre à jour le magasin avec l'info de l'appel ajax lors de l'appel ajax est terminée. Pour ce faire vous avez besoin d'accéder à la dispatch fonction du magasin. La section sur les AsyncActionCreators devrait vous montrer comment faire cela.
Je voudrais aussi rester à l'écart de la bibliothèque jusqu'à ce que vous comprenez comment faire des choses avec seulement react-redux.
Aussi, vous devez être absolument clair sur la façon synchrone actions de respecter à la fois réducteur et le magasin avant d'essayer d'utiliser asynchrone actions.
Mon vote pour axios. L'utiliser dans la Production, et c'est génial.

OriginalL'auteur jmona789 | 2016-09-30

  1. 31

    Vous pouvez essayer tout de suite. J'ai utilisé les deux fetch et axios ils fonctionnent étonnamment bien. Pas encore essayer superagent.

    1. Pour faire des demandes, vous pouvez soit utiliser fetch avec
      fetch-polyfill pour la compatibilité sur tous les navigateurs (lien)
    2. Axios de la bibliothèque. (lien)
    3. Superagent avec des promesses.(lien)

    Si vous utilisez la récupérer, vous devez utiliser polyfill puisqu'il n'est pas pris en charge dans IE et safari encore. Mais avec polyfill, ça fonctionne très bien. Vous pouvez consulter les liens de la façon dont vous pouvez les utiliser.

    Donc ce que vous devriez faire est un acte créateur, vous pouvez appeler une API à l'aide de tout ce qui précède.

    CHERCHER

    function fetchData(){
    const url = '//you url'
    fetch(url)
    .then((response) => {//next actions})
    .catch((error) => {//throw error})
}

    AXIOS

     axios.get('//url')
  .then(function (response) {
    //dispatch action
  })
  .catch(function (error) {
    //throw error
  });

    De sorte que c'était pour l'appel d'API, présent à l'état. Dans redux il y a un état qui s'occupe de votre application. Je suggère que vous devriez passer par redux notions de base que vous pouvez trouver ici . Donc, une fois que votre appel d'api réussit, vous devez mettre à jour votre état avec les données.

    Action pour récupérer les données

     function fetchData(){
    return(dispatch,getState) =>{ //using redux-thunk here... do check it out 
        const url = '//you url'
        fetch(url)
        .then (response ) => {dispatch(receiveData(response.data)} //data being your api response object/array
        .catch( error) => {//throw error}
    }
  }

    D'Action pour la mise à jour de l'état 

       function receiveData(data) {
      return{
        type: 'RECEIVE_DATA',
        data
     }
   }

    Réducteur

       function app(state = {},action) {
      switch(action.types){
          case 'RECEIVE_DATA':
                 Object.assign({},...state,{
                   action.data 
                     }
                  }) 
          default:
             return state
      }
   }
    Brillant résumé. Grâce Harkirat
    Je vous remercie. Je suis maintenant en train de faire une requête POST avec Axios à l'aide d'axios.poste, mais elle conserve l'envoi d'une requête get à la place. Dois-je créer une action pour le poste de travail? voir: stackoverflow.com/questions/39797940/...
    Devinez ur problème est résolu?
    J'ai fait beaucoup de travail avec bundle de dimensionnement et les performances, et Axios semble clairement être la plus petite surcharge en termes de taille globale du module ajouté à votre bundle. Généralement, Réagir applications ont tendance à être bouffés sur le fournisseur de lots. Axios est atleast mieux de cette façon.

    OriginalL'auteur Harkirat Saluja