API 请求返回两个对象：Redux 中如何用一个 Reducer 分离状态？

Question

我有一个 API 调用，它返回两个对象：data 和 pageOutput。

{
data: "[{"title":["Travis Jackson HOF 1931 W517 # 12 - SGC 50"],"image":["https://i.ebayimg.com/00/s/MTYwMFg5NzY=/z/uU8AAOSwMtdd3ZXo/$_1.JPG"],"itemURL":["https://rover.ebay.com/rover/1/711-53200-19255-0/1?ff3=2&toolid=10044&campid=5338164673&customid=vintagebaseball&lgeo=1&vectorid=229466&item=133253226463"]"
pageOutput: "{"pageNumber":["1"],"entriesPerPage":["100"],"totalPages":["2"],"totalEntries":["194"]}"
}

我有一个 reducer，它从我的 API 中获取数据并将数据存储在一个称为“棒球”的状态中，就像这样。请注意，它只是存储我的 API 调用中的“数据”部分。

const baseballReducer = (state = [], action) => {
  switch (action.type) {
    case "INIT_BLOGS":
      return action.data;

export const initializeBaseball = () => {
  return async dispatch => {
    const baseballCards = await baseballService.getAll();
    dispatch({
      type: "INIT_BLOGS",
      data: JSON.parse(baseballCards.data)
    });
  };
};

我需要将 pageOutput 设置为单独的状态。现在我知道我可以创建一个单独的 page reducer，调用 api 并将 pageOutput 数据存储在新状态。但是，我认为对 API 进行两次不同的调用是不好的做法？

有没有更好的方法？我正在考虑将所有数据（包括 pageOutput）存储在棒球状态，但是我不确定这是否是最佳实践，特别是考虑到我有一个需要更新的活动页面的分页控件重新查询数据库。希望这足够清楚——很高兴提供任何额外的代码。

Answer 1

无需进行两次 api 调用，因为您已经在一次 api 调用中获得了所有数据。

基本上你可以：

• 让两个 reducer 监听相同的调度操作，每个 reducer 通过将有效负载解构为相关属性 (data / pageOutput) 来接收总 api 响应的不同部分
• 总共分派两个单独的操作，每个减速器一个。

你使用哪个应用程序并不重要，所以这取决于个人喜好。

如果您可以控制后端 api，我可能会以不同的方式处理分页。分页状态可以在客户端完全处理，api 只会响应客户端的请求（限制/偏移量 - 或 pageNr，perPage 查询参数取决于您的喜好）。
即使您因此可以在 api 响应中返回元数据，您也不需要依赖 api 响应来管理您的状态（从 page1 -> page2 的前端状态更改将取决于单击 page2 和客户端定义的配置，而不是关于 api 的响应）。