这篇文章更多的是关于我正在构建的应用程序面临的当前问题的讨论。我很想听听不同的人对他们如何实施这个:)的看法我使用 redux 作为示例，但这个问题实际上扩展到所有前端状态管理。
我正在构建一个应用程序，它是一个分页新闻源类型的列表，一次加载 10 个帖子的结果。当我到达该列表的底部时，它将获取另外 10 个帖子并附加到列表中。
我正在将我的状态管理为帖子哈希和分页 ID 列表。每次我到达列表的末尾时，我都会从偏移量中获取下一组结果，并将新 id 推送到列表的末尾，这一切都很好用。
{
posts: {
a: {
content: 'some content'
points: 100
},
b: {
content: 'some other content'
points: 98
},
c: { ... },
d: { ... },
e: { ... },
.
.
.
},
popularPosts: [
'a',
'b',
'd',
'e'
.
.
.
],
newPosts: [...]
}
问题是我有下拉以刷新列表顶部并获取最新热门帖子的功能(就像您在 Twitter 或 9gag 应用程序中的方式一样)。
问题是按点排序是动态的。例如，在第一次请求时，我按上述点排序的帖子是 [a， b， d， e]。现在，如果人们在"b"后投票几分，现在服务器上的顺序是 [b， a， d， e] 当我下次刷新时会发生什么。我可以天真地在来自服务器的 id 的新顺序和状态中的现有顺序之间找到一个共同序列，并将差异附加到列表顶部，但这是一个非常基本的例子，您可以看到对于大容量应用程序，状态将很快变得不同步并引入潜在的重复。
最好尽可能多地缓存应用程序中已经加载的帖子，并尝试找出我可以协调的现有分页 ID 列表中的位置/方式。简单的解决方案是擦除状态并重新开始，我只是想知道是否有人对此有任何经验以及他们是如何解决的？
很好的问题，就我而言，每次刷新时，我都会使用 Array.sort 并赋予它我的 compareFunction，所以我的 10 篇帖子的元素将按照我的意愿排序。
看看 http://devdocs.io/javascript/global_objects/array/sort
我也遇到过类似的困难。所以基本上，你用两种可能的方式修改你的状态：1.分页和2。拉动以刷新。
假设您对它们都有 2 个不同的操作：FETCH_POSTS_SUCCESS用于分页，FETCH_POST_REFRESH用于拉取以刷新。
每当您触发FETCH_POSTS_SUCCESS操作时，都应附加接下来的 10 个 post ID，当触发FETCH_POST_REFRESH操作时，您刷新状态数组并附加服务器本身上的前 10 个 post ID。刷新时不需要保留分页 ID，只需在初始化时和刷新时需要前 10 个 ID。
我将尝试发布我自己的解决方案，并寻求一些建设性的批评:)为了使我的解决方案易于遵循，我将使用 4 个帖子而不是 10 个帖子的页面大小。
假设我们有一个包含 10 个帖子的列表(因此在本例中加载了 3 个页面)
id | points |
-------------
a | 100
b | 90
c | 87
d | 43
-------------
e | 30
f | 12
g | 5
h | 4
-------------
i | 3
j | 3
现在假设我下拉刷新，我得到了另外 4 个帖子，结果如下(其中一些已经缓存，但显然带有陈旧点)
id | points |
-------------
g | 120
z | 115
h | 113
e | 112
我知道我的这些结果是排序的，我知道我的缓存结果是排序的，所以我需要做的就是从缓存集中提取任何公共键(我甚至可以从我的问题中查询我的posts哈希来构建搜索候选列表，而无需迭代每个项目)。当这些 id 被提取时，我的缓存条目应如下所示。
id | points |
-------------
a | 100
b | 90
c | 87
d | 43
f | 12
i | 3
j | 3
现在我知道我的新结果集的点数高于我的缓存集，所以我只需将它们堆叠在顶部即可给我
id | points |
-------------
g | 120
z | 115
h | 113
e | 112
a | 100
b | 90
c | 87
d | 43
f | 12
i | 3
j | 3
因此，我现在遇到的唯一问题是确定与缓存结果不同的新结果数是否大于页面大小，以及在什么条件下我进行另一次页面提取，直到我同步所有内容。我可以天真地继续获取，直到我的新结果集的序列与缓存结果集中的序列匹配
我知道这里有很多边缘情况，只是想做一个大脑转储:)