reactjs - 如何保存本地组件数据，例如旋转器/错误，在 Flux 商店之外？

Question

注意:我使用 Reflux 作为我的 Flux 库，因此示例将使用其语法。然而，这个问题一般适用于 Flux。

在我的示例 Flux 应用程序中，我有一个 productStore.js 文件，它保存系统中产品的状态并监听各种产品管理操作，例如 REMOVE_PRODUCT， ADD_PRODUCT。

以下是商店中的示例数据:

{
    products: [
        {
            productName: "A"
        },
        {
            productName: "B"
        }
    ]
}

现在我想向组件添加 REFRESH_PRODUCTS 操作。

调用看起来像这样:

组件.jsx

onRefresh(e) {
    actions.refreshProducts();
}

由于刷新产品是一个异步操作，我想在旋转时显示旋转器，并在失败时显示错误。最明显的 Flux 方式是将加载状态和产生的错误(如果发生这种情况)添加到存储中，如下所示:

productStore.js

onRefreshProducts() {

    logger.info("Logging in:", email);
    this.storeData.inProgress = true;
    this.storeData.error = null;
    this.trigger(this.data);

    api.getProducts()
        .then((response) => {
            this.storeData.products = response.data.products;
        })
        .catch((response) => {
            this.storeData.error = error;
        })
        .then(() => {
            this.storeData.inProgress = false;
            this.trigger(this.data);
        });
}

现在数据存储因各种标志而变得肮脏:

{
    inProgress: false,
    error: null,

    products: [
        {
            productName: "A"
        },
        {
            productName: "B"
        }
    ]
}

如果多个组件需要查看产品加载进度或刷新失败，这种状态对我来说非常合适，但以防万一，没有其他组件需要此类信息。所以感觉我在没有充分理由的情况下将私有(private)数据置于全局状态。

我希望能够做这样的事情:

component.jsx - 错误代码

onRefresh(e) {

    this.setState({error: false, inProgress: true});
    actions.refreshProducts()
        .catch(function(err) {
            this.setState({error: err});
        })
        .then(function() {
            this.setState({inProgress: false});
        });
}

然后我就可以保持商店代码的干净。但是，我没有明显的方法来做到这一点 - 根据设计，操作创建了一个不允许从操作返回数据的分离。

正确的做法是什么？如何在保持相关数据不处于全局状态的同时进行私有(private)旋转/错误/等？

Answer 1

这是我在写这个问题时想到的一个解决方案:

• 在商店上创建一个新操作，允许通过参数更新产品数据，例如:refreshProductFromData
• 直接从组件调用 API
• 操作组件中的旋转器/错误处理
• 通过新操作将从 API 检索到的数据传递到存储

像这样:

组件.jsx

onRefresh(e) {

    this.setState({error: false, inProgress: true});
    api.getProducts()
        .then(function(data) {
            actions.refreshProductFromData(response.data.products);
        });
        .catch(function(err) {
            this.setState({error: err});
        })
        .then(function() {
            this.setState({inProgress: false});
        });
}

但是不确定这是否是正确/最佳的解决方案。