Comment puis-je faire une requête HTTP dans react-redux?
je commence juste avec react et je suis un peu perdu. J'essaie de créer une page de connexion et une requête http post. En ce moment, j'essaie juste de faire fonctionner N'importe quel type de requête HTTP, donc j'utilise request bin et j'ai trouvé cette action de base dans docs pour un paquet 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 réellement obtenir mon application pour faire appel et utiliser cette action? Les docs pour le paquet npm mentionne quelque chose à propos de la mise en place d'un État dans mon magasin, est-ce quelque chose que je dois installer en premier?
1 réponses
Vous pouvez essayer tout de suite. J'ai utilisé les deux fetch et axios ils fonctionnent étonnamment bien. Pas encore essayer superagent.
- Pour faire des requêtes, vous pouvez utiliser
fetchavec fetch-polyfill pour la compatibilité sur tous les navigateurs (lien) - Bibliothèque Axios. (lien)
- Superagent avec des promesses.(lien)
si vous utilisez fetch vous devez utiliser polyfill car il n'est pas encore pris en charge dans IE et safari. Mais avec polyfill, ça marche plutôt bien. Vous pouvez consulter les liens pour savoir comment vous pouvez les utiliser.
alors ce que vous feriez est dans votre action creator vous pouvez appeler une API en utilisant n'importe lequel de ceux-ci.
FETCH
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 API, qui arrive maintenant dans l'état. Dans redux il y a un État qui gère votre application. Je vous suggère de devrait passer par les bases de redux que vous pouvez trouver ici . Ainsi, une fois que votre appel 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}
}
}
Action de 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
}
}