如何避免让一个不再有用的异步(应用程序不再期待它)能够更新状态？

Question

我在我的单一页面应用程序( app + Redux)上有下面的模式。

每次在应用程序上加载页面时，它都会运行。用户导航到特定的页面，并分派loadPageThunk。页面的初始状态向用户显示了一个旋转器。例如，这是在博客页面中使用的。

这个按钮将获得一些异步数据( blogpost)，然后使用该数据显示页面。

效果很好。当用户从页面导航时。useEffect分派一个RESET操作，将状态重置为初始值。

我的问题是：

如果异步调用要花费太长时间才能完成，并且用户导航离开，该怎么办？这将造成一个问题，因为现在有一个悬而未决的承诺，将在一个意想不到的时间完成。如何防止该完成更新我的状态？

想象一下异步调用需要10秒才能完成的以下步骤：

#### FIRST PAGE LOAD ####

USER VISITS blog/slug-1
loadPageThunk() IS DISPATCHED
blogPost1 STARTS GETTING FETCHED (WILL TAKE 10 SECONDS)
USER NAVIGATES AWAY

#### SECOND PAGE LOAD ####

USER VISITS blog/slug-2
blogPost2 STARTS GETTING FETCHED (WILL TAKE 10 SECONDS)
USER IS STILL SEEING SPINNER
blogPost1 (FROM THE PREVIOUS VISIT) HAS COMPLETE AND WILL UPDATE THE STATE
USER NOW SEES blog/slug-2 WITH THE DATA FROM blogPost1 WHICH IS AN ERROR
blogPost2 WILL EVENTUALLY COMPLETE AND USER WILL SEE A CONTENT FLICKER ON THE PAGE

问题

如何避免无法更新状态的悬而未决的承诺？

这个问题目前没有发生在我的应用程序，但我认为一个好的设计应该解释这一点。

我是否应该为我的ID循环添加一个LOAD_PAGE，以便在ID不匹配时允许callbacks / async code更新状态之前检查当前循环的ID？人们通常如何处理这件事？

Answer 1

我个人将博客数据存储为entities (帖子、评论等)。按id和collections键。集合只是特定页面上的post is数组。

例如,

{
  entities: {
     posts: {
       1: {...},
       2: {...}
     },
     comments: {
        123: {...},
        999: {...}
     }
  },
  collections: {
     "blog/slug-1": [99,98,97...],
     "blog/slug-2": [89,88,87...],
  }
}

这种结构意味着每个页面都可以将其数据保存在正确的位置，而不管它是否是当前的页面。它还意味着每个页面都可以选择自己的数据，并可以查看该数据是否已经存在于状态中。

Answer 2

createAsyncThunk返回的承诺附带了一个abort()方法，可以用来“取消”承诺。见边跑边取消。您可以在清理过程中调用abort()，以防止雷击成为fulfilled。

在还原器中，如果您正在为您的thunk处理rejected案例，那么您可以为错误名为AbortError的情况添加一个异常，以代替不做任何操作。

扩展一下您的具体情况:一个好的经验法则是，如果您在卸载组件时发现自己‘重置’状态，那么首先应该是本地组件状态。