web-dev-qa-db-fra.com

Comment faire une requête HTTP dans react-redux?

Je commence juste à réagir et je suis un peu perdu. J'essaie de créer une page de connexion et de faire une demande de publication http. En ce moment, j'essaie simplement de faire fonctionner tout type de demande HTTP, donc j'utilise le bac de demande et j'ai trouvé cette action de base dans les documents 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 faire en sorte que mon application appelle et utilise cette action? Les documents du package npm mentionnent quelque chose sur la définition d'un état dans ma boutique, est-ce que je dois d'abord le configurer?

reactjsreduxreact-reduxjsx
17
jmona789

Vous pouvez essayer l’une des méthodes suivantes. J'ai utilisé à la fois fetch et axios ils fonctionnent incroyablement bien. Pourtant, pour essayer superagent.

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

Si vous utilisez fetch, vous devrez utiliser polyfill car il n'est pas pris en charge dans IE et safari pour le moment. Mais avec polyfill, cela fonctionne plutôt bien. Vous pouvez consulter les liens pour savoir comment les utiliser. .

Donc, ce que vous feriez, c'est dans votre créateur d'action que vous pouvez appeler une API en utilisant l'une des options ci-dessus.

[~ # ~] récupérer [~ # ~] 

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

C'était donc pour l'appel d'API, maintenant arrivé à l'état. Dans redux, il y a un état qui gère votre application. Je vous suggère de passer par les bases de redux que vous pouvez trouver ici . Donc, une fois votre appel API réussi, vous devez mettre à jour votre état avec les données.

Action pour récupérer des 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}
    }
  }

Action pour mettre à jour 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
      }
   }
35
Harkirat Saluja