Question

请考虑以下流程：

我有一个包含＆＃34;产品列表的页面＆＃34;和一个模态来创建一个＆＃34;产品＆＃34;。我打开模态，填写表格并提交表格。

此时，我发送了一个动作CREATING_PRODUCT，将产品添加到商店并将http请求发送到服务器。

我关闭模态并使用新产品显示结果列表。

假设我收到服务器的错误响应。

所需行为

我想显示错误，从列表中删除项目，重新打开模式并显示已填充的表单。

问题

如何找到该项目并将其删除？我没有id（或独特属性的组合）来在商店中找到该项目。我没有看到一种干净的方式将请求/响应链接到该产品＆＃34;商店里的物品。

可能的解决方案

客户添加＆＃34; requestId＆＃34;在将其添加到商店之前进入项目。在响应错误时，我发送一个通用＆＃34; CREATE_ERROR＆＃34;然后我从商店中删除带有该requestId的项目。

附加

编辑和删除的问题相同。例如，在删除期间，我应该在商店中使用requestId保留对已删除项目的引用，直到http请求成功为止？

我敢打赌这是一个常见解决方案的问题，但我无法找到示例。谢谢！

Answer 1

通常，您的Redux存储应该像关系数据库一样建模，因为每次有数据模型列表时，列表的每个元素都应该有自己的标识符。在处理更复杂的数据方案时，这有很大帮助。

您应该将项目存储为对象，例如：

{ 
  // ...other store properties
  projects: {
    "_0": { // ... project properties }
    "_1": { // ... project properties }
    // ...more projects...
  },
}

这样，只要您需要弄乱现有项目，就可以引用其ID并使用projects[id]来访问该项目。这也可以解决编辑和删除案例，因为您可以将ID作为句柄传递。

我喜欢this short piece，了解为什么你的Redux商店应该基本上是平的，为什么数据应该总是有很多标识符。它还谈到了使用选择器“隐藏”你的ID，这可能对你有用，也可能没用。

在您的情况下，当您从服务器获取ID时，您可以使用ID前缀来指示未保存的值。所以你的projects对象会变成：

projects: {
  "_0": { // ... }
  "_1": { // ... }
  "UNSAVED_2": { // ... }
}

通过这种方式，您可以轻松识别未保存的值并在发生错误时处理它们，仍然可以在客户端生成临时ID，以便还原错误更改，并在用户尝试执行时向用户发出警告在他们的数据尚未同步时离开您的应用程序 - 只需检查是否有任何“未保存”ID：）

当您从服务器获得响应时，您可以将“UNSAVED_suffix”ID更改为实际ID。

Redux - 在http响应错误时从存储中删除对象

1 个答案: