react-redux - crudGetList 操作不会从响应中不存在的状态数据中删除

Question

警告：这个问题是特定于 react-admin 框架的

我正在尝试编写应用程序手册，该手册使用来自服务器的数据来加载内容页面。为此，我正在做一个自定义页面，用于获取 componentDidMount 上的手册页。在这个函数中，我调用 react-admin crudGetList( resourceName , pagination , sortingById , filters )，其中 filters 是{and:[{condition},{language: currentLanguage}]}因为我想拥有不同语言的手册。我注意到在数据库中有不同语言的页面并使用带有过滤器的 crudGetList 操作获取正确的实例，但是状态保持旧数据。例如，如果我最初以英语获取数据，更改语言并返回手册页，redux 状态将具有两种语言的页面，而不是当前选择的一种。

这是预期的行为吗？对手册页提出新请求不应将 redux-state 数据替换为来自请求的数据？如果不是预期的，我应该打开一个问题吗？

标签： react-reduxreact-admin

Answer 1

React-admin 使用一种称为乐观渲染的模式。这意味着如果应用程序在过去获取了一些实体，如果它需要显示这些实体，它首先显示陈旧的实体，然后获取后端，如果响应不同，则使用最新数据重新渲染屏幕.

例如，当用户获取帖子列表时，react-admin 将这些帖子存储在由 id 索引的字典中：

{
   123: { id: 123, title: "hello" },
   456: { id: 456, title: "world" },
   ...
}

React-admin 还存储了列表应该显示的标识符列表：

[123, 456, ...]

使用这两个属性，react-admin 现在可以显示列表。但它也可以在不先访问服务器的情况下显示帖子的详细信息。因此，当用户单击列表中的某个项目时，react-admin 会使用第一个结构中的数据立即显示它，而无需等待服务器响应。

乐观渲染的目的是为了性能：由于用户不需要等待与服务器的往返，所以界面非常简洁。

在您的特定情况下，我知道这可能会导致问题，因为商店包含不是所需语言的陈旧数据。我建议您创建一个自定义 saga，它对语言更改操作做出反应，并清除存储以避免此类问题。

检查 react-admin 站点中自定义 saga 的文档：

https://marmelab.com/react-admin/Admin.html#customsagas