如何在Redux中构造分页状态

Question

TL; DR：如何在给定的大型状态树，大量资源，多个视图显示不同分页结果的情况下，将分页状态存储在Redux存储中？

我想知道在Redux存储中存储分页数据的最佳方法是什么。本文规定将分页信息存储为状态树中自己的子树。我同意该方法，但是在这里我不同意：本文建议通过要分页的资源类型来为分页子树设置关键字，但是如果有多个视图使用不同的参数显示同一资源的分页数据，该怎么办？如果遵循本文的方法，状态树可能最终看起来像这样

{
  pagination: 
     todos: 
       count: 1000,
       nextPageUrl: ...,
       result: [list of id's]
     users:
       count: 200,
       nextPageUrl: ...,
       result: [list of id's]
}

如果您有多种查看同一资源的方式，这对我来说似乎没有任何意义。如果在一个屏幕上有多个表显示使用不同参数提取的待办事项怎么办？例如，一个表显示从中获取的待办事项，另一表显示从中获取的/api/todos/?userId=1待办事项/api/todos/?userId=2。

鉴于上述问题，似乎允许更灵活的分页的解决方案是按每个组件而不是按实体存储分页状态。所以你的状态可能看起来像这样

{
  pagination:
    componentId:
       count: 1000,
       nextPageUrl: ...,
       result: [list of id's]
    anotherComponentId:
       count: 1000,
       nextPageUrl: ...,
       result: [list of id's]
}

当然，存储这样的分页结果会丢失有关正在分页的内容的上下文。但这是一个很大的问题吗？您如何对一个大型状态树进行分页，而同一资源可能具有多个分页结果？谢谢！

Answer 1

我认为redux-cached-pagination ( Demo here ) 可以帮助解决您的问题。规范化搜索结果存储在 redux 中的树中，如下所示：

{
  standard_store: {
    pagination: {
      searchPhrase__: {//results for given search params
        lastUpdateTime: 1516177824890,//last update time helps to refresh data in background
        pages: {    //each page is stored. You can adjust history length
          '1': {
            isFetching: false,//each page has fetching status
            isRefreshing: false,
            isSuccess: true,
            isFailed: false,
            lastUpdateTime: 1516177824891,
            elements: [ //in 'elements' array only ids are stored. Results are normalized
              100000,
              100001,
                ...
            ]
          }
        },
        elementsCount: 800
      },
      searchPhrase_a_: { //results for "a" search phrase
        lastUpdateTime: 1516177844624,
        pages: {
          '1': {
            isFetching: false,
            isRefreshing: false,
            isSuccess: true,
            isFailed: false,
            lastUpdateTime: 1516177844624,
            elements: [
              100001,
              100016,
              100017,
              100031,
              100044,
              100046,
              100049,
              100055,
              100056,
              100058,
              100065,
              100076,
              100077,
              100084,
              100088
            ]
          }
        },
        elementsCount: 138
      }
    },
    entities: { //here are stored entities. Entities are not duplicated. 
      '100000': {
        examData: 'BVUGUN',
        examIndexAtAll: 0,
        id: 100000
      },
      '100001': {
        examData: 'ZR7ADV',
        examIndexAtAll: 1,
        id: 100001
      },
        ...
    },
    paginationParams: {},
    searchParams: {
      searchPhrase: 'al'
    },
    currentPage: {
      pageNumber: 1
    }
  }
}

这个json是直接从redux复制过来的。此外，您还可以获得后台刷新结果、虚拟化列表的简单使用、存储上次访问的页面等功能。如果您想在多个列表中使用它，我建议使用reselect。