API 请求返回两个对象:如何使用一个化简器在 Redux 中分离状态?

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"]}"
}

我有一个化简器，它从我的 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)
});
};
};

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

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

Answer 1

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

基本上你可以：

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

您使用哪一个应用程序并不重要，因此归结为个人品味。

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