redux React工具包中的乐观更新

8ftvxx2r 于 2023-06-23 发布在 React

关注(0)|答案(1)|浏览(140)

我有一个项目列表，由getItems查询加载，每个项目都有一个按钮，可以在选定和未选定之间切换。我也有UI来创建一个新的项目添加到列表中。
当一个按钮在一个项目上被切换时，我会触发一个updateItem变异，并乐观地更新getItems缓存中的那个项目，这样按钮就能立即切换。在幕后，RTK进行updateItem变异，当它成功并使该项目的标签无效时，它进行第二次getItems查询以获取项目的最新数据。然后，这将拾取先前所做的远程更改并覆盖乐观更新。这工作正常，UI感觉快速和响应。
但是，我也需要能够创建新的项目。RTK Query不支持对新条目的乐观更新，所以我需要在条目列表前面显示一个加载微调器，并防止与之进一步交互，直到查询返回，使getItems查询无效，并（重新）加载它们，这次将新创建的条目包含在返回的条目中。
如何让UI在这两种情况下表现不同：

如果updateItem的结果是乐观更新，我们将使UI处于正确状态，因此在重新获取getItems期间不要显示微调器或锁定UI
如果存在createItem突变，锁定UI并在重新获取getItems期间显示微调器

这里的问题是，虽然我可以知道请求isFetching，但当getItems被重新获取时，我无法区分它为什么被重新获取，也无法知道是否有乐观更新。这意味着我无法决定是否显示微调器并锁定UI。

redux

来源：https://stackoverflow.com/questions/76524422/optimistic-updates-in-react-tool-kit

1条答案

按热度按时间

nzk0hqpo1#

您可以使用listener中间件直接侦听createItem的突变，而不是依赖isFetching。下面是一个示例实现：

export const itemListenerMiddleware = createListenerMiddleware()

itemListenerMiddleware.startListening({
  matcher: isAnyOf(
    itemApi.endpoints.createItem.matchPending, // mutation has started
    // add additional matchers here
  ),
  effect: async (action, listenerApi) => {
    listenerApi.dispatch(setLoading(true)) // Replace with you loading indicator logic
  }
})

参考：https://redux-toolkit.js.org/api/createListenerMiddleware

赞(0）回复(0）举报 2023-06-23

我来回答

redux React工具包中的乐观更新

1条答案

相关问题

热门标签

最新问答