0

我希望对乐观 ui 模式的“我的”实现进行简短的代码审查。我正在使用 SWR、immer 和定制的 fetch 挂钩来完成大部分繁重的工作。但是，我不确定这是否确实是这样做的方法。尤其是在为乐观生成的项目分配临时 ID 时。我不应该在某个地方清除它吗？会不会引起问题？

const spawn = async flavour => {
    const payload = {
      planId: flavour.id,
      name: 'test',
      description: '',
    }
    mutate(
      '/account/instances',
      produce(draft => {
        draft.push({
          ...payload,
          id: uuid(),
          plan: {name: flavour.name},
          state: {status: 'PENDING'},
          image: {name: flavour.image.name},
        })
      }),
      false
    )
    mutate(
      '/account/instances',
      await doFetch('/account/instances', 'post', payload)
    )
  }

谢谢！

4

1 回答 1

1

你的代码对我来说似乎是正确的。它将乐观地更新 UI，从后端获取数据，如果数据不同，则使用该数据再次更新 UI。

关于生成的 id，它真的取决于你用它做什么。如果您没有做任何重要的事情，它可能会没问题，因为当后端回复时，该 ID 将被真实的 ID 覆盖。但是如果你将它显示给用户可能会导致问题（用户会看到它正在更新），或者如果你提供一个基于它的操作甚至更糟。

我还想提请您注意，由于网络原因或与后端问题相关的原因，回复可能会失败。在这种情况下，如果您只收到一个错误或从未收到任何回复，您的 UI 将保持不正确的状态，直到 swr 进行下一次成功提取。为了避免此类问题，您可能对use-mutation感兴趣。这是一个小型库，旨在与 swr 一起使用，以在出现错误时回滚乐观更新的数据。

于 2021-04-06T21:01:29.183 回答