javascript - 使用 Flux 时保持 UI 与 ajax 调用同步的惯用方法是什么？

Question

一般问题:假设我有一个带有调用 Action 创建器的 onClick 处理程序的按钮。该操作执行一个 ajax 调用，该调用在 ajax 响应时分派(dispatch)一条消息，这在某种程度上影响了 UI。鉴于此基本模式，没有什么可以阻止用户多次单击此按钮，从而多次运行 ajax 调用。

这在 React 或 Flux 文档中似乎没有涉及(据我所知)，所以我尝试自己想出一些方法。

这是那些方法

• 在执行 ajax 调用的方法上使用 lodash.throttle，这样快速连续的多次点击就不会创建多个调用。
• 在方法上使用 lodash.debounce，这样只有在用户暂时没有进行任何事件时才会调用 ajax。这就是我如何根据更改对文本字段进行半实时更新。
• 在首次调用该操作时向商店发送“正在更新”消息，然后在 ajax 调用返回时发送“完成”消息。执行一些操作，例如在初始消息中禁用输入，然后在第二个消息中重新启用。

第三种方法在功能方面似乎是最好的，因为它允许您使用户界面准确反射(reflect)正在发生的事情，但它也非常冗长。它用大量的额外状态、处理程序方法等把所有东西都搞得一团糟……

我觉得这些方法中的任何一个都不是真正的惯用方法。什么是？

Answer 1

Hal 几乎是正确的。分发多条消息是最灵活的方法。

但是，我会小心发送 IS_UPDATING 消息。这使得对您的代码进行推理变得更加困难，因为对于每个 AJAX 操作，您将同时分派(dispatch)多个操作。

惯用的解决方案是将您的 AJAX“ Action ”( Action 创建者 Action )分成三个分派(dispatch)的 Action :MY_ACTION、MY_ACTION_SUCCESS、MY_ACTION_FAILURE，适本地处理每个实例，并沿途跟踪“未决性”。

例如:

// MyActionCreator.js

// because this is in a closure, you can even use the promise 
// or whatever you want as a sort of "ID" to handle multiple
// requests at one time.
postMessage() {
    dispatch('POST_MESSAGE', { ... } );
    api.slowMessagePostingAjaxThingy().then(
        (success) => { dispatch('POST_MESSAGE_SUCCESS', { ... }); },
        (failure) => { dispatch('POST_MESSAGE_FAILURE', { ... }); }
    );
}

// MyStore.js

on('POST_MESSAGE', (payload) => { /* do stuff */ });
on('POST_MESSAGE_SUCCESS', (payload) => { /* handle success */ });
on('POST_MESSAGE_FAILURE', (payload) => { /* handle failure */ });

与替代解决方案相比，这为您带来了多项优势:

1. 您的商店完全控制商品是否处于待处理状态。您不必担心在 UI 代码中更改操作的 UI 状态:您可以让 UI 专门查看商店的 pending 属性以获取真实信息。这可能是在 MVC 系统上使用 Flux 的最大原因。
2. 您有一个干净的界面来执行您的操作。很容易推理并且很容易将其他存储附加到此数据(如果您有 LatestMessageStore 或其他东西，则很容易订阅这些事件)。这是 Hal 建议的使用 IS_UPDATING 的好处。
3. 当它们在语义上有意义时，您可以保存 lodash 调用，例如当您可能被合法数据(文本字段)淹没时。
4. 您可以轻松地在乐观更新(在调用 POST_MESSAGE 时更改存储)或悲观更新(在调用 POST_MESSAGE_SUCCESS 时更改存储)之间轻松切换。