从一个 ajax 响应更新两个商店答案

【问题标题】：Updating two stores from one ajax response从一个 ajax 响应更新两个商店
【发布时间】：2015-09-05 19:03:33
【问题描述】：

我正在使用带有 Flux 架构的 react js，但无法解决影响多个商店的异步请求问题。我有一个表单存储和一个结果存储。提交表单组件向 results 存储（而不是在结果存储中注册的调度程序）发送一个操作，该操作向外部 api 触发 ajax 请求，该 api 根据序列化的表单信息（来自我的结果存储）。此响应会填充结果存储，从而有效地初始化结果组件状态。这一切都按预期工作。
当表格中有错误时，问题就来了。如果有错误（但仍有 200 个响应代码）通过 api 发送给我一个错误响应对象。问题是，我在我的结果存储中，需要将这些错误发送到表单存储。在flux kata之后，需要一个动作来更新表单存储，但从存储中触发一个动作似乎是不对的。这是我要去的通量周期

FormComponent -->  
ResultsAction.fetchResults(relaventFormData) -->  
ResultStoreDAL.fetchResults -->  
$.ajax.success: if (response.errors){ 
  //update the FormStore with response.errors
}

FormComponent 从 FormStore 获取状态（有错误状态）
ResultsComponent 从 ResultsStore 获取状态
ResultsStore 通过来自 ResultsStoreDAL 的 ajax 请求使用非默认（空）数据进行初始化（这是一个私有对象，与 ResultsStore 在同一个文件中）
在 ajax 成功中，如果有错误，则使用返回的结果更新结果存储，需要使用表单错误更新 FormStore，因为错误与结果无关。

TL;DR 我有两家店。我通过一个动作和 $.ajax.success 发出一个 ajax 请求，如果没有验证错误，我更新一个商店，如果有验证错误我更新另一个商店。假设我不能使用前端验证来防止错误，那么这个分支逻辑应该放在哪里，因为据我所知，从商店调用操作不是最佳实践。

【问题讨论】：

标签： javascript reactjs reactjs-flux

【解决方案1】：

我认为在收到数据时触发操作是个好主意。这样一来，任何对新数据感兴趣的商店都会受到关注，并且可以对其进行任何操作。我不认为从商店创建动作会很糟糕，但这是我自己通常做的事情：

我有两种类型的动作创建者，一种用于查看动作，一种用于服务器动作。将它们分开保存会使事情更容易维护，但实际上并不是必需的。提交表单的用户将导致创建视图操作。这将初始化数据获取，同时通知任何感兴趣的商店已经提出了一些请求。

回到你的例子，你可以有这个：

var ActionCreators = {
    submitForm: function(formData) {
        AppDispatcher.handleViewAction({
            type: ActionTypes.SUBMIT_FORM,
        });

        WebAPI.fetchResults(formData);
    },
};

module.exports = ActionCreators;

WebAPI 会发出一个 ajax 请求，然后在其回调中创建一个适当的服务器操作（使用新数据）。下面是使用 jQuery 的样子：

// WebAPI.js
module.exports = {
    fetchResults: function(formData) {
        $.ajax({
            url: url,
            data: formData,
            success: function(response) {
                if (response.success)
                    ServerActionCreators.fetchResultSuccess(response);
                else
                    ServerActionCreators.fetchResultError(response);
            }
        });
    }
};

// ServerActionCreators.js
var ServerActionCreators = {
    fetchResultSuccess: function(response) {
        AppDispatcher.handleServerAction({
            type: ActionTypes.FETCH_RESULTS_SUCCESS,
            response: response
        });
    },

    fetchResultError: function(response) {
        AppDispatcher.handleServerAction({
            type: ActionTypes.FETCH_RESULTS_ERROR,
            response: response
        });
    },
};

module.exports = ServerActionCreators;

再次回到您的示例，您可以让您的 FormComponent 在用户提交表单时执行ActionCreators.submitForm(formData);，然后显示加载微调器（或您想要执行的任何操作）。

收到数据后，将创建并分派包含数据的操作（FETCH_RESULTS_SUCCESS 或 FETCH_RESULTS_ERROR）。现在所有商店都可以决定是否要对新数据做任何事情。

我还建议您查看 Facebook 的 Flux Chat Example。

【讨论】：