如何基於URL中的參數從API提取數據

Question

我正在React Native中構建一個從API獲取數據的應用程序。 API數據是有關航班起飛/到達的信息。 我想做的事情很簡單，我希望該應用程序有2個選項卡，可在到達和離開之間切換屏幕。 2個屏幕將顯示所有航班的出發或到達。 目前，我只是為了顯示出發航班並從URL（例如URL/flights/departures獲取數據而做的應用程序。 由於我是Native的新手，所以我無法理解的是如何基於URL參數獲取數據。 我的意思是我擁有API URL，並且如果它是添加到URL的出站信息或到達信息，例如API/flights/{flightType} ，我想獲取數據，以便在屏幕更改時獲取正確的數據。 我現在所做的只是在下面，但僅用於離開時，我想了解如何根據自己的需要進行更改。

import axios from 'axios';
import { apiBaseURL } from "../Utils/Constants";
import {
    FETCHING_FLIGHTS_DATA
    ,FETCHING_FLIGHTS_DATA_SUCCESS,
    FETCHING_FLIGHTS_DATA_FAIL
} from "../Utils/ActionTypes";

export default function FetchFlightData() {
    return dispatch => {
        dispatch({ type: FETCHING_FLIGHTS_DATA});
        return axios.get(`${apiBaseURL}/departures`)
            .then(res => {
                dispatch({ type: FETCHING_FLIGHTS_DATA_SUCCESS, payload: res.data})
            })
            .catch(err => {
                dispatch({ type: FETCHING_FLIGHTS_DATA_FAIL, payload: err.data})
            })
    }
}

Answer 1

您可以將排期類型作為參數傳遞給函數，並在切換選項卡時使用正確的類型調用FetchFlightData 。 您可能應該將每種類型的獲取成功分開，或者將飛行類型作為參數添加到您的有效載荷中，然后在減速器中對起飛數據或到達數據進行區別

import axios from 'axios';
import { apiBaseURL } from "../Utils/Constants";
import {
   FETCHING_FLIGHTS_DATA,
   FETCHING_FLIGHTS_DATA_SUCCESS,
   FETCHING_FLIGHTS_DATA_FAIL
} from "../Utils/ActionTypes";

export default function FetchFlightData(flightType) {
    return dispatch => {
        dispatch({ type: FETCHING_FLIGHTS_DATA});
        return axios.get(`${apiBaseURL}/${flightType}`)
            .then(res => {
                dispatch({ type: FETCHING_FLIGHTS_DATA_SUCCESS, payload: {data:res.data,type:flightType}})
            })
            .catch(err => {
                dispatch({ type: FETCHING_FLIGHTS_DATA_FAIL, payload: err.data})
            })
    }
}

//somewhere in the reducer
case FETCHING_FLIGHTS_DATA_SUCCESS:
  return {
     ...state,
     arrivals: action.payload.type === 'arrival' ? action.payload.data: state.arrivals,
     departures: action.payload.type === 'departures' ? action.payload.data:state.departures
  }
break;

// somewhere in your code when you detect a change of tab
FetchFlightData('arrivals');
FetchFlightData('departures');