Как получить данные из API на основе параметров в URL

Question

Я создаю приложение в React Native для извлечения данных из API.Данные API - это информация о вылетах / прилетах рейсов.То, что я пытаюсь сделать, очень просто, я хочу, чтобы приложение имело 2 вкладки, которые переключают экраны между прибытием и отъездом.На 2 экранах будут отображаться все рейсы отправления или прибытия.На данный момент я сделал приложение только для того, чтобы показывать вылеты рейсов и получать данные с URL типа URL/flights/departures.Что я не могу понять, так как я новичок в Native, это то, как я могу получать данные на основе параметров URL.Я имею в виду, что у меня есть URL-адрес API, и я хотел бы получить данные, если они добавляются к 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');