Многократные асинхронные отправки при загрузке страницы дают ошибку?

Question

На моей домашней странице есть несколько виджетов, которые должны возвращать данные из асинхронных операций.В каждом компоненте я отправляю действие следующим образом:

componentDidMount() {
    this.props.dispatch(homepageActions.getUpcomingTrips());
}

Я получаю ошибку TypeError: data.upcoming_hikes is undefined, когда тем же способом подключаю второй виджет.После проверки моего состояния выясняется, что мои данные «перезаписываются», потому что все они вызываются одновременно.

Глядя на Devux-устройства Redux, я могу видеть HOMEPAGE_CURRENT_PACK_REQUEST, HOMEPAGE_UPCOMING_TRIPS_REQUEST, HOMEPAGE_UPCOMS_CLE_HERCE_CIPS_RUST_KIPS_REC_RE_PRE_SID_RUS_RUS_RUS_RUS_RUS_RUS_RUS_RUS_RUS_RUS_RUS_RUS_RUS_Kв этой последовательности.И мои данные выглядят так:

HOMEPAGE_UPCOMING_TRIPS_SUCCESS:

HOMEPAGE_CURRENT_PACK_SUCCESS:

Кажется,мне нравится, что объект данных перезаписывается?

Мой редуктор записывается так:

import { homepageConstants } from '../_constants';

const initialState = {
  data: {},
  loading: true,
  error: null,
}

export function homepage(state = initialState, action) {
  console.log('action: ', action);

    // current pack widget reducer
    switch (action.type) {
        case homepageConstants.CURRENT_PACK_REQUEST:
            return {
        ...state,
                data   : {},
                loading: true,
            };
        case homepageConstants.CURRENT_PACK_SUCCESS:
            return {
        ...state,
                data   : action.data,
                loading: false,
            };
        case homepageConstants.CURRENT_PACK_FAILURE:
            return {
        ...state,
                error: action.error,
            };

        // total miles widget reducer
        case homepageConstants.TOTAL_MILES_REQUEST:
            return {
        ...state,
                data   : {},
                loading: true,
            };
        case homepageConstants.TOTAL_MILES_SUCCESS:
            return {
        ...state,
                data   : action.data,
                loading: false,
            };
        case homepageConstants.TOTAL_MILES_FAILURE:
            return {
        ...state,
                error: action.error,
            };

        // upcoming trips widget reducer
        case homepageConstants.UPCOMING_TRIPS_REQUEST:
            return {
        ...state,
                data: {},
                loading: true,
            };
        case homepageConstants.UPCOMING_TRIPS_SUCCESS:
            return {
        ...state,
                data: action.data,
                loading: false,
            };
        case homepageConstants.UPCOMING_TRIPS_FAILURE:
            return {
        ...state,
                error: action.error,
            };

        default:
            return state;
    }
}

Если мои предположения верны, эти данные перезаписываются (потому что это имя этого ключавнутри каждого корпуса редуктора, как мне справиться с этим? Есть ли лучший способ для обработки нескольких отправлений, как это при загрузке страницы?

Answer 1

У вас есть два варианта.

1. Для распространения action.data.При таком подходе вы должны изменить способ доступа к элементам.

{
  ...state,
  ...action.data,
}

Чтобы распространить data и action.data и сохранить в data.

{
  ...state,
  data: {
    ...state.data,
    ...action.data,
  },
}

Любой из этих двух способов решит вашу проблему,