web-dev-qa-db-ja.com

Axiosを使用したReduxでのAPI呼び出しの処理

皆さんこんばんは！

私はReact and Reduxの初心者ですので、これが完全に馬鹿げているように聞こえる場合はご容赦ください。アクションクリエーターからのリクエストをコンソールログに記録するとき、promise値は常に「未定義」であるため、これを正しく行っているかどうかはわかりません。

私の目標は、ペイロードオブジェクト内のデータから情報を取得し、コンポーネント内に表示することです。私は過去数日間これを機能させようとしていましたが、完全に迷っています。

Axios forとredux-promiseを使用して呼び出しを処理しています。

どんな助けも大歓迎です。

コンソールからの出力は次のとおりです。

enter image description here

enter image description here

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);
javascriptreactjspromisereduxaxios
19
Steinar

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
  };
}
28
Phi Nguyen

サンクでこれを行うことができます。 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);});
    };
}
6
HeonAle

また、これを行う最良の方法はredux-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'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

次のようにこのタスクを処理しました。

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

これを解決する最善の方法は、すべてのAPI要求を処理するためにreduxミドルウェア http://redux.js.org/docs/advanced/Middleware.html を追加することです。

https://github.com/svrcekmichal/redux-axios-middleware は、使用できるプラグアンドプレイミドルウェアです。

4
Shyjal Raazi