Gestione chiamate api in Redux con Axios

Question

Buona sera a tutti!

Sono un principiante assoluto in React e Redux quindi per favore abbiate pazienza se questo sembra totalmente stupido. Sto cercando di imparare come posso eseguire alcune chiamate API in Redux e non sta andando tutto bene. Quando consegno la richiesta di log dal creatore dell'azione, il valore di promessa è sempre "indefinito", quindi non sono sicuro di farlo correttamente.

Il mio obiettivo è raccogliere le informazioni dai dati all'interno dell'oggetto payload e visualizzarle all'interno del componente. Ho cercato di farlo funzionare negli ultimi giorni e sono completamente perso.

Sto usando Axios per e redux-promise per gestire la chiamata.

Qualsiasi aiuto sarà molto apprezzato.

Ecco l'output dalla console.

azione Creatore

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

Reducer

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

Componente

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

Answer 1

axios è la promessa quindi è necessario utilizzare then per ottenere il risultato. Dovresti richiedere la tua API in un file separato e chiamare la tua azione quando il risultato tornerà.

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

Nel file azione sarà simile a questo:

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

Answer 2

Il modo migliore per risolvere questo problema è con l'aggiunta di middleware Redux http://redux.js.org/docs/advanced/Middleware.html per la gestione di tutte le richieste API.

https://github.com/svrcekmichal/redux-axios-middleware è un plug-and-play middleware che è possibile utilizzare.

Answer 3

Penso anche che il modo migliore per farlo è redux-axios-middleware. La configurazione può essere un po 'complicato come il negozio dovrebbe essere configurato in modo simile:

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

E i tuoi creatori d'azione appare così:

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' 
     } 
    } 
    } 
} 

Answer 4

È possibile farlo con tonfo. https://github.com/gaearon/redux-thunk

È possibile inviare un'azione nel proprio then e aggiornerà lo stato quando riceve una risposta dalla chiamata axios.

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