crudGetList 操作不会从响应中不存在的状态数据中删除
crudGetList action does not delete from state data not present in response
警告:此问题特定于 react-admin 框架
我正在尝试制作一个应用内手册,它使用来自服务器的数据来加载内容页面。为此,我正在做一个自定义页面,该页面在 componentDidMount 上获取手册页。在这个函数中我调用了 react-admin crudGetList(resourceName, pagination, sortingById , filters),其中 filters 是 {and:[{condition},{language: currentLanguage}]}
因为我想要不同语言的手册。我注意到在数据库中使用不同语言的页面并使用带过滤器的 crudGetList 操作可以获取正确的实例,但是状态会保留旧数据。例如,如果我最初以英语获取数据,更改语言并返回到手册页,redux state 将有两种语言的页面,而不是当前选择的一种。
这是预期的行为吗?对手册页发出新请求不应该将 redux 状态数据替换为来自请求的数据?如果不是预期的,我应该打开一个问题吗?
您必须配置 redux 存储如何响应新传入的数据。
更具体地说,这就是 "reducer" 的用途;您的 "action"(在您的情况下是 crudGetList
)将数据馈送到 "reducer",这只是一个函数,其中包含指示商店如何根据新数据调整其形状的说明。
您应用中的某处可能有一个 reducer 响应您的获取操作,但它被配置为仅将新结果与旧结果并排推送,而不是替换它们。然而,如果没有看到描述整个 redux 的代码,很难知道 "cycle".
redux 文档非常棒。我会从那里开始,确保你对整个数据流是否通过 redux 有很好的理解,然后去寻找那个减速器。
React-admin 使用一种称为乐观渲染 的模式。这意味着如果应用程序过去获取了一些实体,如果它需要显示这些实体,它首先显示陈旧的实体,然后获取后端,如果响应不同,则使用最新数据重新渲染屏幕.
例如,当用户获取 post 的列表时,react-admin 将这些 post 存储在索引为 id 的字典中:
{
123: { id: 123, title: "hello" },
456: { id: 456, title: "world" },
...
}
React-admin 还存储了列表应该显示的标识符列表:
[123, 456, ...]
使用这两个属性,react-admin 现在可以显示列表。但它也可以显示 post 的详细信息,而无需先访问服务器。所以当用户点击列表中的某个项目时,react-admin 会使用第一个结构中的数据立即显示它,而无需等待服务器响应。
乐观渲染的目的是性能:因为用户不需要等待与服务器的往返,界面超级活泼。
在您的特定情况下,我知道这可能会导致问题,因为存储中包含未使用所需语言的陈旧数据。我建议您创建一个自定义 saga,它会响应语言更改操作,并清除商店以避免此类问题。
在 react-admin 站点查看自定义传奇的文档:
警告:此问题特定于 react-admin 框架
我正在尝试制作一个应用内手册,它使用来自服务器的数据来加载内容页面。为此,我正在做一个自定义页面,该页面在 componentDidMount 上获取手册页。在这个函数中我调用了 react-admin crudGetList(resourceName, pagination, sortingById , filters),其中 filters 是 {and:[{condition},{language: currentLanguage}]}
因为我想要不同语言的手册。我注意到在数据库中使用不同语言的页面并使用带过滤器的 crudGetList 操作可以获取正确的实例,但是状态会保留旧数据。例如,如果我最初以英语获取数据,更改语言并返回到手册页,redux state 将有两种语言的页面,而不是当前选择的一种。
这是预期的行为吗?对手册页发出新请求不应该将 redux 状态数据替换为来自请求的数据?如果不是预期的,我应该打开一个问题吗?
您必须配置 redux 存储如何响应新传入的数据。
更具体地说,这就是 "reducer" 的用途;您的 "action"(在您的情况下是 crudGetList
)将数据馈送到 "reducer",这只是一个函数,其中包含指示商店如何根据新数据调整其形状的说明。
您应用中的某处可能有一个 reducer 响应您的获取操作,但它被配置为仅将新结果与旧结果并排推送,而不是替换它们。然而,如果没有看到描述整个 redux 的代码,很难知道 "cycle".
redux 文档非常棒。我会从那里开始,确保你对整个数据流是否通过 redux 有很好的理解,然后去寻找那个减速器。
React-admin 使用一种称为乐观渲染 的模式。这意味着如果应用程序过去获取了一些实体,如果它需要显示这些实体,它首先显示陈旧的实体,然后获取后端,如果响应不同,则使用最新数据重新渲染屏幕.
例如,当用户获取 post 的列表时,react-admin 将这些 post 存储在索引为 id 的字典中:
{
123: { id: 123, title: "hello" },
456: { id: 456, title: "world" },
...
}
React-admin 还存储了列表应该显示的标识符列表:
[123, 456, ...]
使用这两个属性,react-admin 现在可以显示列表。但它也可以显示 post 的详细信息,而无需先访问服务器。所以当用户点击列表中的某个项目时,react-admin 会使用第一个结构中的数据立即显示它,而无需等待服务器响应。
乐观渲染的目的是性能:因为用户不需要等待与服务器的往返,界面超级活泼。
在您的特定情况下,我知道这可能会导致问题,因为存储中包含未使用所需语言的陈旧数据。我建议您创建一个自定义 saga,它会响应语言更改操作,并清除商店以避免此类问题。
在 react-admin 站点查看自定义传奇的文档: