如何确保 Store 中的响应属于 React/Flux 的最新请求答案

【问题标题】：How to make sure response in Store belongs to latest Request at React/Flux如何确保 Store 中的响应属于 React/Flux 的最新请求
【发布时间】：2016-11-13 05:30:58
【问题描述】：

我有一个输入字段，我用onChange 检查验证。在更改事件中，我触发了一个操作，例如：MyActions.checkUsername()，以便同时查看用户名是否已被使用。

问题是当我检查商店以查看验证响应时，我得到了前一个请求的响应值。因为它是异步的。

那么在 React with Flux 中解决这个问题的理想方法是什么？

【问题讨论】：

标签： reactjs request response store flux

【解决方案1】：

可以帮助缓解问题的一种技术是使用 lodash 的 debounce 方法，这样您就不会在检查中发送垃圾邮件。

在下面的粗略示例中，我使用了 lodash 的去抖动功能，以便异步检查仅在 500 毫秒安静后触发（即在用户停止输入 500 毫秒后）。

例如：

import { debounce } from 'lodash';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.checkUser = debounce(this.checkUser.bind(this), 500 /*ms*/);
  }

  checkUser(value) {
    // fire async check
  }

  render() {
    return (
      <form>
        <input onChange={this.checkUser} />
      </form>
    );     
  }
}

这可能无法完全缓解问题，但请尝试一下。在寻求更复杂的解决方案之前，您也可以尝试延长去抖时间。

如果您不想添加 lodash 作为依赖项，那么您可以编写自己的 debounce。这是一个例子：

https://davidwalsh.name/javascript-debounce-function

【讨论】：

谢谢。我之前已经尝试过检查功能的去抖动，但由于某种原因它不起作用。就像你说的，反正也不是最终的解决方法，知道正确的方法就好了……我总是可以更新状态，根据状态进行验证，但是不愿意这样做……跨度>
你是如何触发异步请求的？他们是在 redux-thunk 动作创建者中基于承诺的调用吗？
确实不确定，但我可以检查。其他人做了助焊剂部分。这不是 redux - 我知道。