如何基于URL中的参数从API提取数据

Question

I'm building an app in React Native fetching data from an API. The API data is information about flights departures/arrivals. What I'm trying to do is very simple, I want that the app has 2 tabs which switch screens between Arrivals and Departure. The 2 screens will show all the flights departures or arrivals. At the moment I did the app only to show the departures flights and getting data from the URL like URL/flights/departures . What I cannot understand as I'm new in Native is how can I fetch data based on the URL params. What I mean is that I have the API URL and I would like to fetch the data if it is departures or arrivals adding to the URL like API/flights/{flightType} so when a screen changes the correct data is fetched. What I did for now is below but only for departures and I would like to understand how to change it to do as I need.

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

You can pass the flight type as a parameter to your function and when switching the tab call the FetchFlightData with the right type. You probably should separate the fetch success for each type or add the flight type as a parameter to your payload and then in the reducer make the difference between data of departures or data of arrivals

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