web-dev-qa-db-fra.com

Gestion des appels API dans Redux avec Axios

Bonsoir tout le monde!

Je suis un débutant total en React et Redux alors veuillez supporter avec moi si cela semble totalement stupide. J'essaie d'apprendre comment je peux effectuer certains appels d'API dans Redux et ça ne va pas tout Lorsque je console la demande du créateur de l'action, la valeur de la promesse est toujours "indéfinie", donc je ne suis pas sûr de le faire correctement.

Mon objectif est de récupérer les informations des données à l'intérieur de l'objet de charge utile et de les afficher à l'intérieur du composant. J'ai essayé de faire fonctionner ça ces derniers jours et je suis totalement perdu.

J'utilise Axios for et redux-promise pour gérer l'appel.

Toute aide sera fortement appréciée.

Voici la sortie de la console.

enter image description here

enter image description here

Créateur d'actions 

import axios from 'axios';
export const FETCH_FLIGHT = 'FETCH_FLIGHT';

export function getAllFlights() {

const request = axios.get('http://localhost:3000/flug');
console.log(request);
  return {
    type: FETCH_FLIGHT,
    payload: request
    };
}

Réducteur 

import { FETCH_FLIGHT } from '../actions/index';

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_FLIGHT:
    console.log(action)
      return [ action.payload.data, ...state ]
    }
   return state;
  }

Composant 

import React from 'react';
import { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getAllFlights } from '../actions/index';
import Destinations from './Destinations';

class App extends Component {

componentWillMount(){
  this.props.selectFlight();
}

constructor(props) {
 super(props);
  this.state = {
 };
}

render() {
  return (
    <div>
    </div>
    );
 }

function mapStateToProps(state) {
 return {
   dest: state.icelandair
  };
}

function mapDispatchToProps(dispatch) {
 return bindActionCreators({ selectFlight: getAllFlights }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
javascriptreactjspromisereduxaxios
19
Steinar

axios est la promesse, vous devez donc utiliser then pour obtenir votre résultat. Vous devez demander votre API dans un fichier séparé et appeler votre action lorsque le résultat revient.

 //WebAPIUtil.js
axios.get('http://localhost:3000/flug')
  .then(function(result){ 
    YourAction.getAllFlights(result)
  });

Dans votre fichier d'action sera comme ceci:

export function getAllFlights(request) {
  console.log(request);
  return {
    type: FETCH_FLIGHT,
    payload: request
  };
}
28
Phi Nguyen

Vous pouvez le faire avec thunk. https://github.com/gaearon/redux-thunk

Vous pouvez envoyer une action dans votre then et elle mettra à jour l'état lorsqu'elle recevra une réponse de l'appel axios.

export function someFunction() {
  return(dispatch) => {
      axios.get(URL)
        .then((response) => {dispatch(YourAction(response));})
        .catch((response) => {return Promise.reject(response);});
    };
}
6
HeonAle

Je pense également que la meilleure façon de le faire est de redux-axios-middleware. La configuration peut être un peu délicate car votre magasin doit être configuré de la même manière:

import { createStore, applyMiddleware } from 'redux';
import axiosMiddleware from 'redux-axios-middleware';
import axios from 'axios';
import rootReducer from '../reducers';

const configureStore = () => {   
  return createStore(
    rootReducer,
    applyMiddleware(axiosMiddleware(axios))
  );
}

const store = configureStore();

Et vos créateurs d'action ressemblent maintenant à ceci:

import './axios' // that's your axios.js file, not the library

export const FETCH_FLIGHT = 'FETCH_FLIGHT';

export const getAllFlights = () => {
  return {
    type: FETCH_FLIGHT,
    payload: {
      request: {
        method: 'post', // or get
        url:'http://localhost:3000/flug'
      }
    }
  }
}
5
krankuba

J'ai pris soin de cette tâche comme ceci:

import axios from 'axios';

export const receiveTreeData = data => ({
  type: 'RECEIVE_TREE_DATA', data,
})

export const treeRequestFailed = (err) => ({
  type: 'TREE_DATA_REQUEST_FAILED', err,
})

export const fetchTreeData = () => {
  return dispatch => {
    axios.get(config.endpoint + 'tree')
      .then(res => dispatch(receiveTreeData(res.data)))
      .catch(err => dispatch(treeRequestFailed(err)))
  }
}
5
duhaime

La meilleure façon de résoudre ce problème est d'ajouter des middlewares redux http://redux.js.org/docs/advanced/Middleware.html pour gérer toutes les demandes d'api.

https://github.com/svrcekmichal/redux-axios-middleware est un middleware plug and play que vous pouvez utiliser.

4
Shyjal Raazi