Редукс редуктор, добавление нескольких запросов API-страниц в состояние - PullRequest
Новая
       34

Редукс редуктор, добавление нескольких запросов API-страниц в состояние

0 голосов
/ 26 сентября 2019

Я создаю приложение.Это приложение должно запросить API woocommerce для данных о продукте.API допускает только 100 элементов одновременно, поэтому мне приходилось вызывать этот запрос 4 раза с динамическими параметрами страницы.

Моя цель для этих данных состоит в том, чтобы редуктор объединял данные в один массив, который можетфильтроваться в реактивном компоненте.

Моя проблема на данный момент заключается в том, что мой редуктор добавляет каждый вызов API в состояние в своем собственном массиве.Таким образом, вместо того, чтобы иметь большой массив с 300 продуктами ish, у меня есть 1 массив, который содержит 4 массива в каждом из 100 продуктов. Пожалуйста, смотрите изображение ниже.

Результат данных состояния

Вот действие: 

export function fetchJuiceData(page) {
  return dispatch => {
    dispatch(getDataPending("juicedata"));
    return axios
      .get(
        "API_call/end_point/&page=" +
          page
      )
      .then(response => {
        dispatch(getDataSuccess("juicedata", response));
      })
      .catch(err => {
        dispatch(getDataFailure("juicedata", err));
      });
  };
}

, которое запускается 4 раза с асинхронностью: 

const juiceDataPages = 4;
    var i;
    for (i = 0; i < juiceDataPages; i++) {
      await dispatch(fetchJuiceData(i + 1));
    }

Мой редуктор: 

const juiceDataReducer = (state = initState, action) => {
  switch (action.type) {
    case "FETCH_JUICEDATA_PENDING": {
      return { ...state, fetching: true };
    }
    case "FETCH_JUICEDATA_REJECTED": {
      return { ...state, fetching: false, error: action.payload };
    }
    case "FETCH_JUICEDATA_FULFILLED": {
      return {
        ...state,
        fetching: false,
        fetched: true,
        juiceData: [...state.juiceData, action.payload]
      };
    }
    default: {
      return state;
    }
  }
};

Я не являюсьвеличайший кодер в мире и будет рад вашему вкладу.Я уже несколько дней бьюсь головой о стену.ТИА.

1 Ответ

1 голос
/ 26 сентября 2019

Кажется, что полезная нагрузка, которую вы помещаете, сама по себе является массивом.Поэтому попробуйте использовать для него оператор распространения, например, так: 

case "FETCH_JUICEDATA_FULFILLED": {
  return {
    ...state,
    fetching: false,
    fetched: true,
    juiceData: [...state.juiceData, ...action.payload]
  };
}

Таким образом, вместо всего массива добавляются только элементы внутри полезной нагрузки.

...