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

Posted 2023-02-22

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

【英文标题】：API Request Returns Two Objects: How Do I Separate State in Redux with One Reducer?

【发布时间】：2020-03-25 04:33:52

【问题描述】：

我有一个 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）存储在棒球状态，但是我不确定这是否是最佳实践，特别是考虑到我有一个需要更新的活动页面的分页控件重新查询数据库。希望这足够清楚——很高兴提供任何额外的代码。

【参考方案1】：

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

基本上你可以：

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

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

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

【讨论】：

我已经做了几次选项一。我需要基于单个调用的状态的不同部分。所以我调度了一个动作，然后在从 api 返回时，返回另一个动作，然后由两个减速器处理。每个人都拉出它需要的部分并相应地存储它。关键是然后记录该操作在两个减速器中处理。

感谢 Trace--我将着手处理这些建议。非常感激。我想我明白你在分页上说什么，但是我正在使用 eBay api，它只允许在一个查询中返回 100 个项目，因此需要进行超过该限制的额外调用。