Обработка вызовов api в Redux с Axios

Добрый вечер всем!

Я новичок в React и Redux, поэтому, пожалуйста, несите меня, если это звучит совершенно глупо. Я пытаюсь узнать, как я могу выполнять некоторые вызовы API в Redux, и все не так хорошо. Когда я консоль регистрирую запрос от создателя действия, значение обещания всегда "undefined", поэтому я не уверен, правильно ли я делаю это.

Моя цель - захватить информацию из данных внутри объекта полезной нагрузки и отобразить их внутри компонента. Я пытался заставить это работать в прошлые дни, и я полностью потерялся.

Я использую Axios for и redux-обещают обрабатывать вызов.

Любая помощь будет принята с благодарностью.

Здесь вывод из консоли.

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

Редуктор

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

Компонент

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

Ответы

Ответ 1

axios - это обещание, поэтому вам нужно использовать then, чтобы получить результат. Вы должны запросить свой api в отдельном файле и вызвать свое действие, когда результат вернется.

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

В вашем файле действий будет выглядеть так:

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

Ответ 2

Лучший способ решить эту проблему - добавить вспомогательные средства redux http://redux.js.org/docs/advanced/Middleware.html для обработки всех запросов api.

https://github.com/svrcekmichal/redux-axios-middleware - это промежуточное программное обеспечение plug-in-play, которое вы можете использовать.

Ответ 3

Я также считаю, что лучший способ сделать это - уменьшить-axios-middleware. Настройка может быть немного сложной, так как ваш магазин должен быть настроен аналогичным образом:

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

И ваши создатели действия теперь выглядят так:

import './axios' // that 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'
      }
    }
  }
}

Ответ 4

Вы можете сделать это с помощью thunk. https://github.com/gaearon/redux-thunk

Вы можете отправить действие в then, и оно обновит состояние, когда оно получит ответ от вызова axios.

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