Question

我正在使用flux js与flux架构，并且无法解决影响多个商店的异步请求的问题。我有一个表格商店和一个结果商店。提交表单组件会向结果存储（而不是在结果存储中注册的调度程序）发送一个操作，该存储会向外部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（它是一个私有对象，与ResultsStore在同一文件中）的ajax请求初始化为非默认（空）数据。在ajax成功中，如果存在错误，则结果存储会更新，并返回结果，因为错误与结果无关，因此需要使用表单错误更新FormStore。

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

Answer 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。

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

1 个答案: