Почему список не появляется на странице? Каковы ошибки в моем приложении React-Redux (Api)? И как их исправить?

Question

Сначала я сделал небольшое приложение на React.js. Используя метод fetch, я беру API

А это основные файлы моего приложения:

Index.js: (действие)

export const SHOW_AIRPLANES = "SHOW_AIRPLANES";

export function showAirplanes() {
  return (dispatch, getState) => {
    fetch("https://api.iev.aero/api/flights/25-08-2019").then(response => {
      dispatch({ type: SHOW_AIRPLANES, payload: response.data });
    });
  };
}

airplanes.js: (редуктор)

import { SHOW_AIRPLANES } from '../actions'

const initialState = {
    list: []
}

export function showAirplanes(state = initialState, action) {

    switch (action.type) {
        case SHOW_AIRPLANES:
            return Object.assign({}, state, {list: action.payload})
        default:
            return state 
    }

}

index.js (редуктор):

import { combineReducers } from "redux";
import { showAirplanes } from "./airplanes";

const rootReducer = combineReducers({
  user: showAirplanes
});

export default rootReducer;

Answer 1

Во-первых, вы должны использовать функцию createStore следующим образом:

const initialData = {}; // whatever you want as initial data
const store = createStore(reducers, initialData, applyMiddleware(thunk));

Затем передайте ее своему поставщику

<Provider store={store}>
 {...}
</Provider

далее, когда вы отобразите свои редукторы внутри combineReducers функция, каждая клавиша в этом объекте представляет часть вашего состояния. Поэтому, когда вы делаете user: showAirplanes, это означает, что вы намереваетесь использовать его в mapStateToProps с state.user.list, поэтому я думаю, что вы хотели назвать его airplane: showAirplanes.

Тогда ваше имя редуктора не информативнодостаточно, я бы предложил изменить его на airplanesReducer.

Следующая проблема, вызов fetch возвращает ответ с JSON, который должен быть разрешен.

Измените это:

fetch("https://api.iev.aero/api/flights/25-08-2019").then(response => {
      dispatch({ type: SHOW_AIRPLANES, payload: response.data });
    });

На это:

fetch("https://api.iev.aero/api/flights/25-08-2019")
    .then(res => res.json())
    .then(response => {
      dispatch({ type: SHOW_AIRPLANES, payload: response.body.departure });
    });

Обратите внимание, что я также изменил значение, которое необходимо разрешить из ответа.

Внутри нужного вам компонента App.jsчтобы создать конструктор и связать функцию renderAirplaneList с this

// Inside the App class
constructor(props) {
  super(props);

  this.renderAirplaneList = this.renderAirplaneList.bind(this);
}

И, наконец (надеюсь, я больше ничего не пропустил), вы отображаете свое состояние в компоненте App.js на { airplanes: state.airplanes.list}, поэтому имя реквизита, которое вы ожидаете внутри своего компонента, равно props.airplanes.

renderAirplaneList() {
    if (!this.props.airplanes.length) {
        return null;
    }

    const arr = this.props.airplanes || [];

    return arr.map(airplane => {
      return (
        <tr key={airplane.id}>
          <td>{airplane.ID}</td>
          <td>{airplane.term}</td>
          <td>{airplane.actual}</td>
          <td>{airplane["airportToID.city_en"]}</td>
        </tr>
      );
    });
  }

Убедитесь, что вы просматриваете документацию React и Redux, у них есть вся необходимая информация.

Удачи.

Answer 2

разве вы не предполагаете отправить некоторые параметры этому вызову?

this.props.showAirplanes()

кажется, что у него есть 2 параметра: состояние и действие, хотя состояние, кажется, ужезначение по умолчанию