具有服务器响应的Ngrx存储具有分页数据

问题描述

现在我要面对NGRX + Angular7。这是我使用NGRX的第一个项目，因此我对Redux缺乏了解。

这种情况是我有服务器端分页。例如通过api / products / ProductionLots？currentPage = 2＆pageSize = 6的GET调用API来获取例如productionLots的当前列表。响应是这样的：

{
     "productionLots": {
       "count": 8,"data": [
        {}
    
    ],"pager": {
      "currentPage": 2,"endPage": 2,"firstLinkCssClass": "First","firstLinkText": "<<","lastLinkCssClass": "Last","lastLinkText": ">>","linkSelectedCssClass": "Selected","nextLinkCssClass": "Next","nextLinkText": ">","pages": [
        {
          "cssClass": "First","pageNumber": 1,"sortDirection": "DESC","sortKey": "Date","text": "<<"
        },{
          "cssClass": "PrevIoUs","text": "<"
        },{
          "cssClass": "","text": "1"
        },{
          "cssClass": "Selected","pageNumber": 2,"text": "2"
        }
      ],"pageSize": 6,"prevIoUsLinkCssClass": "PrevIoUs","prevIoUsLinkText": "<","startPage": 1,"totalPages": 2
    },"sortDirection": "ASC","sortKey": "Date"
  },"partnerQueryStatus": [
    {
      ...
    }
  ]
}

我不为分页数据创建状态。因此，当我转到另一页时，我上一页的状态总是被替换。如何创建存储，以便返回到前一页，无需再次调用api，可以直接从商店获取。另外，如何编写效果以查看所单击页面的数据是否已存储在商店中。目前我的减速器如下：

 export function productionLotDetailsReducer(state: ProductionLotState = initialProductionLotDetails,action: ManufacturingActions.ActionsUnionProductionLotsDetails) {
    switch (action.type) {
        case ManufacturingActions.LOAD_PRODUCTIONLOTS_SUCCESS:
            return {
                ...state,productionLotError: null,loading: false,loaded: true,productionLots: action.payload.data,pager: { currentPage: action.payload.pager.currentPage,endPage: action.payload.pager.endPage }
            };

        case ManufacturingActions.LOAD_PRODUCTIONLOTS:
            return {
                ...state,loading: true,loaded: false,pager: page == null ? { currentPage: state.pager.currentPage,endPage: state.pager.endPage } : page
            };
        case ManufacturingActions.LOAD_PRODUCTIONLOTS_FAIL:
            return {
                ...state,productionLotError: action.payload,pager: {}
            };
        default:
            return state;
    }
}

我将非常感谢您提供答案和提示。谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular ngrx