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

Returning callback from service to component in React + Flux

本文关键字:返回 组件 回调 服务 React Flux      更新时间:2023-09-26

有一个关于Flux与ReactJS的正确实现的问题。

假设我有一个联系人表单,它在提交时调用我的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中。

但是这里我只需要一个响应,这样我就可以显示确认或错误消息。它还应该通过操作和存储传递吗?或者有没有更好的方法,比如直接向组件返回一个承诺,这样它就可以运行一个回调函数,而完全不涉及存储?

总是使用store/flux动作。

从Promise处理程序调度data_received, data_error。它更语义化,更容易调试,并使用与其他内容相同的数据流(action -> store -> view)。

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