1

我有两个模型，其中模型 A 引用模型 B 中的项目。当我从模型 B 中删除项目时，在我可以更新模型 A 以删除引用的项目之前做出反应重新渲染。

例子：

我有一个饲料。提要由不同类型的项目组成。每种类型的项目都存储在其各自的模型中。提要订单存储为项目 ID 数组，引用其不同子商店中的项目。

我在这里做了一个最小的失败示例。点击按钮三次后出现此问题

https://codesandbox.io/s/deleting-referenced-items-kmw1e

关键线是

else console.error(">>>> feed order contains deleted item", id);

提要订单可能包含已删除的项目是有问题的，因为这可能意味着存在导致错误引用的编程错误。在这种情况下，这不是编程错误，只是第二个商店还没有更新。

有没有办法可以批量处理createAndDeleteTodo, 在整个 thunk 和所有 subthunk 完成之前不评估所有听众？

在上面的示例中，只需一个主操作来更新提要订单和项目就足够微不足道了，但是如果存在不止一种类型的项目，因为每种项目类型都存在于它自己的各自模型中，这会让人觉得很麻烦。

4

2 回答 2

1

同一个 thunk 动作正在触发多个动作。并且根据 的定义useStoreState：

每当您的商店状态发生更新时，useStoreState 都会执行

因此，实际上，当您在 thunk 中执行此操作时：

  actions.setTodos({ newTodos: [newTodo], todoToDelete });
  actions.updateFeedOrder({ newTodos: [newTodo], todoToDelete });

有两个动作被分派，它们将解释一个单独的存储状态更改事件侦听器。您将收到多个商店更新的多个渲染调用。

你有两个选择：

  • 如示例所示，将这些操作合并为一个：https : //codesandbox.io/s/so-deleting-referenced-items-forked-x4d7v
  • 或检查 useStoreState 方法以了解仅当两个存储值都与计数匹配时处理渲染的情况
于 2021-04-13T17:42:59.727 回答
0

似乎问题在于您要分派到 redux 商店 2 次。首先是在您创建新项目时，然后是在您删除它们时。

我建议这样做：

  1. 创建您想要使用的对象/数组的深层副本。
  2. 对该副本进行这两项操作。
  3. 将该值发送到商店。

这样，在两个操作都完成之前，不会重新渲染任何内容。

于 2021-04-13T17:04:45.347 回答