在 React + Flux 中从服务返回回调到组件答案

【问题标题】：Returning callback from service to component in React + Flux在 React + Flux 中从服务返回回调到组件
【发布时间】：2016-11-04 14:58:49
【问题描述】：

对使用 ReactJS 正确实现 Flux 有疑问。

假设我有一个联系表单，它在提交时调用我的 ContactService，传递表单信息。

ContactService.js

import request from 'superagent';
import when from 'when';
import ContactActions from '../actions/';

let constants = require('../constants.js');
const BASE_URL = constants.default.BASE_URL;

class ContactService {

  submitFormData(formData) {
    request
    .get(BASE_URL + 'api/v1/contact') 
    .end(function(err, res){
      if (!err && res){
        // This is where my question is
      } else {
        console.log("There has been an error submitting contact form to API");
        console.log(err)
        // This is also kind of where my question is
      }
    })
  }
}

export default new ContactService();

现在，我想通知我的组件提交是否成功。我的问题是最好的方法是什么？如果我从 API 检索数据，或者需要更改组件的状态，我会通过将响应传递给 Action 并将数据保存在组件可以订阅的 Store 中来处理它。

但是在这里我只需要一个响应，以便我可以显示确认或错误消息。是否仍应通过动作和存储传递？或者有没有更好的方法，比如直接向组件返回一个promise，这样它就可以运行一个回调函数而不涉及到store？

【问题讨论】：

不，从不从动作返回数据，动作是fire and forget
我直接从组件调用服务，所以我会从服务返回数据，而不是从操作。

标签： javascript reactjs flux

【解决方案1】：

flux 架构中的所有数据检索都必须通过存储和操作来完成

【讨论】：

【解决方案2】：

总是对这类事情使用 store/flux 操作。

从 Promise 处理程序中分派 data_received、data_error。它更语义化，更易于调试，并且使用与其他所有内容相同的数据流（操作 -> 存储 -> 视图）。

【讨论】：