javascript - Redux Reducer、状態に複数の API ページ分割リクエストを追加

Question

私はアプリを構築しています。このアプリは、商品データ用に woocommerce API をリクエストする必要があります。API では一度に 100 項目しか許可されないため、動的ページ パラメータを使用してこの要求を 4 回呼び出す必要がありました。

このデータに対する私の目的は、レデューサーがデータを結合して、反応コンポーネントでフィルター処理できる 1 つの配列にすることです。

現時点での私の問題は、レデューサーが各 API 呼び出しを独自の配列に追加していることです。したがって、300 個の製品を含む大きな配列ではなく、それぞれ 100 個の製品を含む 4 つの配列を含む 1 つの配列があります。下の画像を参照してください。

状態データ結果

アクションは次のとおりです。

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;
    }
  }
};

私は世界で最も優れたコーダーではありません。あなたの意見を歓迎します。ここ数日、頭を壁にぶつけています。ティア。