Gestion des appels api en Redux avec Axios

Bonsoir tout le monde!

Je suis un total débutant à Réagir et Redux, de sorte s'il vous plaît garder avec moi si cela vous semble totalement stupide. Je suis en train d'apprendre comment je peux effectuer quelques appels de l'API dans Redux et il ne va pas très bien. Quand j'ai du journal de la console la demande de l'action, créateur de la promesse de valeur est toujours "undefined" donc je ne sais pas si je le fais correctement.

Mon but est de récupérer les informations à partir des données à l'intérieur de la charge utile de l'objet et de les afficher à l'intérieur du composant. J'ai essayé d'obtenir que cela fonctionne pour les derniers jours et je suis totalement perdu.

Je suis à l'aide d'Axios et redux-la promesse de traiter l'appel.

Toute aide sera grandement appréciée.

Voici la sortie de la console.

Gestion des appels api en Redux avec Axios

Gestion des appels api en Redux avec Axios

Action Créateur

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

source d'informationauteur Steinar

  1. 15

    axios est la promesse de sorte que vous devez utiliser then pour obtenir votre résultat. Vous devriez demander à votre api dans un fichier séparé et d'appel de votre action lorsque le résultat revient.

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

    Dans votre fichier "action" sera comme ceci :

    export function getAllFlights(request) {
  console.log(request);
  return {
    type: FETCH_FLIGHT,
    payload: request
  };
}
  2. 3

    La meilleure façon de résoudre ce problème est d'ajouter redux middlewares http://redux.js.org/docs/advanced/Middleware.html du traitement de toutes les requêtes à l'api.

    https://github.com/svrcekmichal/redux-axios-middleware est un plug-and-play middleware, vous pouvez faire usage de.

  3. 2

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

    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)))
  }
}
  4. 1

    Je pense aussi que la meilleure façon de le faire est par redux-axios-middleware. Le programme d'installation peut être un peu délicat comme votre magasin doit être configuré de manière similaire:

    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 votre action de créateurs maintenant ressembler à 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'
      }
    }
  }
}