Obsługa połączeń api w Redux z Axios

Question

Dobry wieczór wszystkim!

Jestem całkowitym początkującym w React i Redux, więc proszę o zachowanie mnie, jeśli to brzmi totalnie głupio. Próbuję dowiedzieć się, jak mogę wykonać niektóre wywołania API w Redux i to nie idzie dobrze. Kiedy konsola loguje żądanie od twórcy akcji, wartość obietnicy jest zawsze "nieokreślona", więc nie jestem pewien, czy robię to poprawnie.

Moim celem jest pobranie informacji z danych wewnątrz obiektu ładunku i wyświetlenie ich wewnątrz komponentu. Starałem się, aby to działało przez ostatnie dni i jestem całkowicie zagubiony.

Używam Axios dla i redux-obiecuję obsłużyć połączenie.

Każda pomoc zostanie bardzo doceniona.

Oto wyjście z konsoli.

Action Creator

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

Reduktor

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

Komponent

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 jest obietnica, więc trzeba użyć then aby uzyskać wynik. Powinieneś poprosić o api w oddzielnym pliku i zadzwonić do akcji, gdy wynik wróci.

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

W pliku działania będzie tak:

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

Answer 2

Najlepszym sposobem rozwiązania tego jest dodanie middleware Redux http://redux.js.org/docs/advanced/Middleware.html do obsługi wszystkich żądań API.

https://github.com/svrcekmichal/redux-axios-middleware to oprogramowanie pośredniczące typu plug and play, z którego można korzystać.

Answer 3

Myślę też, że najlepszym sposobem na to jest przez redux-axios-middleware. Konfiguracja może być nieco trudne, ponieważ Twój sklep powinien być skonfigurowany w podobny sposób:

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

A twoi twórcy akcji teraz wyglądać następująco:

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

Można to zrobić z thunk. https://github.com/gaearon/redux-thunk

Możesz wysłać akcję w swoim then i będzie aktualizować stan, gdy otrzyma odpowiedź z połączenia z aksją.

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