javascript - API请求返回两个对象：如何使用一个Reducer在Redux中分离状态？(API Request Returns Two Objects: How Do I Separate State in Redux with One Reducer?)

Question

I have an API call, that is returning two objects: data and pageOutput.(我有一个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"]}" } I have a reducer that is fetching the data from my API and storing data in aa state called 'baseball' like this.(我有一个reducer，它从我的API中获取数据并以这种状态（称为“棒球”）存储数据。) Note it is just storing the 'data' piece from my API call.(请注意，它只是存储来自我的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) }); }; }; I need to get the pageOutput into a separate state.(我需要将pageOutput设置为单独的状态。) Now i know that i could create a separate page reducer, make a call to the api and store that pageOutput data in a new state.(现在我知道我可以创建一个单独的页面精简器，调用api并将该pageOutput数据存储为新状态。) However, i think that it would be bad practice to make two different calls to the API?(但是，我认为对API进行两次不同的调用将是一种不好的做法？) Is there a better way?(有没有更好的办法？) I was thinking of just storing all of the data (including the pageOutput) in the baseball state, but then I'm not sure if this is best practice or not, especially considering that I have a Pagination control that needs the updated active page to requery the database.(我本来只是想以棒球状态存储所有数据（包括pageOutput），但是然后我不确定这是否是最佳做法，尤其是考虑到我有一个分页控件需要更新的活动页面来重新查询数据库。) Hope this is clear enough--happy to provide any additional code.(希望这足够清楚-乐于提供任何其他代码。)   ask by John Rogerson translate from so

Answer 1

There is no need to make two api calls as you already have all data available in a single api call.(无需进行两个api调用，因为您已经在一个api调用中拥有了所有可用数据。)

Basically you can:(基本上，您可以：) Have two reducers listening to the same dispatched action, each reducer receiving a different portion of the total api response by destructuring the payload to the relevant property (data / pageOutput)(让两个reducer侦听相同的调度动作，每个reducer通过将有效负载分解为相关属性（data / pageOutput）来接收总api响应的不同部分。) Dispatch two separate actions altogether, one for each reducer.(总共分派两个单独的动作，每个减速器一个。) It doesn't really matter to the app which one you use, so imo it comes down to personal taste.(这与您使用哪个应用程序无关紧要，因此imo取决于个人喜好。) If you have control over the backend api, I would probably handle pagination a bit differently.(如果您可以控制后端api，那么我可能会以不同的方式处理分页。) Pagination state can be handled fully at the client, and the api would just respond to the client's request (limit / offset - or pageNr, perPage query parameters depending on your taste).(分页状态可以在客户端完全处理，而api只会响应客户端的请求（限制/偏移量-或pageNr，perPage查询参数取决于您的口味）。)
Even though you could therefore return meta data in the api response, you wouldn't need to depend on the api response to manage your state (frontend state change from page1 -> page2 would depend on clicking page2 and configurations defined by the client, not on the response of the api).(即使您因此可以在api响应中返回元数据，也无需依赖api响应来管理状态（从page1-> page2进行前端状态更改将取决于单击page2和客户端定义的配置，而不是关于api的响应）。)