React+Reflux 存储和组件应该如何使用 ajax 处理 onChange 按键答案

【问题标题】：React+Reflux how should stores and components handle onChange key presses with ajaxReact+Reflux 存储和组件应该如何使用 ajax 处理 onChange 按键
【发布时间】：2015-07-12 20:07:42
【问题描述】：

我需要一些帮助来了解我正在进行的反应/回流模式，如果它可以接受的话。

我有一个表单组件，它呈现几个表单元素，例如下面的示例。表单组件连接到 Reflux Store，表单元素的数据存放在其中。

exports.InputField = React.createClass({
  getInitialState: function(){
    return {
      value: this.props.initialValue
    }
  },

  onChange: function(e){
    this.setState({value: e.target.value});

    // this is being throttled.
    Actions.SomeAction(this.props.name, e.target.value);
  },

  render: function(){
    var value = this.state.value;
    return (
      <input type="text" value={value} onChange={this.onChange}/>
    )
  }
})

在给定的示例中，用户在字段中输入，这反过来会触发 ajax 请求来保存数据，通常响应状态码为 200。

完成后我是否应该在我的商店里 this.trigger'ing？这将导致表单上的setState 在每次去抖动按键时被调用。这很糟糕吗？
我是否可以从商店触发事件，例如 Actions.FieldUpdated 并在字段组件中收听？

有几个使用提交按钮更新事物的反应/回流示例，但我找不到任何使用 onChange 的示例。

【问题讨论】：

标签： reactjs reactjs-flux flux refluxjs

【解决方案1】：

如果在服务器端更新数据时没有从存储中触发，则意味着在发生错误时不会通知视图。在不了解您的用例的情况下，很难知道这是否是一件好事。你不应该担心调用 setState 太多次，这就是 React 的重点。调用 setState 意味着只渲染已更改的内容，因此通常成本不高。在您的情况下，当您触发时调用 setState 可能有点没用，因为您在输入内容发生更改之前调用它。
允许商店调度操作。如果您希望您的商店变得聪明，有时需要它。您可以考虑进行 API 调用的情况，但首先必须将操作分派到另一个存储以获取授权令牌。避免它很好，但有时你别无选择。

【讨论】：