javascript - API 请求返回两个对象 : How Do I Separate State in Redux with One 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 中获取数据并将数据存储在一种称为“棒球”的状态中，就像这样。请注意，它只是存储来 self 的 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 进入一个单独的状态。现在我知道我可以创建一个单独的页面缩减器，调用 api 并将该 pageOutput 数据存储在新状态中。但是，我认为对 API 进行两次不同的调用是不好的做法吗？

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

Answer 1

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

基本上你可以:

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

您使用哪个应用程序并不重要，所以我认为这取决于个人品味。

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