如何在Redux

Question

TL; DR：如果给定一个包含大量资源的大型规范化状态树，并且多个视图显示不同的分页结果，如何在Redux存储中存储分页状态？

我想知道在Redux商店中存储分页数据的最佳方法是什么。 This article规定将分页信息存储在状态树中作为自己的子树。我同意这种方法，但这里我不同意：文章建议按分页资源的类型键入分页子树，但是如果有几个视图使用不同的参数显示相同资源的分页数据呢？如果你按照文章的方法，你的状态树最终可能会像这样

{
  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。