Reactjs 如何将本地组件数据（例如微调器/错误）保存在通量存储之外？

注意：我使用Reflux作为我的通量库，因此示例将使用它的语法。然而，这个问题一般适用于流量

在我的示例Flux应用程序中，我有一个

productStore.js

文件，它保存系统中产品的状态，并侦听各种产品管理操作，例如

REMOVE\u product

，

ADD\u product

以下是存储中的示例数据：

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

现在，我想向组件添加一个

REFRESH\u PRODUCTS

操作

调用如下所示：

组件.jsx

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

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});
        });
}

因为刷新产品是一个异步操作，所以我想在微调器运行时显示它，如果失败则显示错误。显而易见的方法是将加载状态和由此产生的错误（如果发生这种情况）添加到存储中，如下所示：

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"
        }
    ]
}

如果多个组件需要查看产品加载的进度，或者刷新失败，这种状态对我来说非常好，但是在这种情况下，没有其他组件需要这种信息。因此，我觉得我把私人数据放到全球国家没有一个很好的理由

我希望能够做到这一点：

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});
        });
}

这样我就可以把商店的代码保持干净。然而，我没有明显的方法来做到这一点——动作，通过设计，创建了一个不允许从动作返回数据的分离

---

正确的方法是什么？如何在不让相关数据处于全局状态的情况下执行私有微调器/错误等操作？

在撰写此问题时，我想到了一个解决方案：

• 在存储上创建一个新操作，允许通过参数更新产品数据，例如：

  refreshProductFromData

• 直接从组件调用API
• 操纵组件中的微调器/错误处理
• 通过新操作将从API检索到的数据传递到存储

像这样：

组件.jsx

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

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});
        });
}

---

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

我找到了你的帖子，因为我有同样的问题。我想我会这样构造我的，保持所有东西的解耦，并通过动作进行沟通。我喜欢让组件和存储对API一无所知

• 产品操作知道如何与API交互以完成请求的操作
• 产品存储侦听已完成的操作以更新其内部状态
• LoadingActions管理微调器状态，并在API调用启动时被要求显示/隐藏微调器
• 我有一个微调器组件，它侦听LoadingActions并更新其状态以显示/隐藏微调器

组成部分：

actions.refresh();

（产品）行动：

加载动作：

onShowSpinner: function () { ... }
onHideSpinner: function () { ... }

商店：

onRefreshCompleted: function (data) {
    this.products = data;
    this.trigger();
}

---

为什么不将其设置为组件的状态，而不是存储中？像平常一样使用setState（{}）。如果我正确理解您的问题-对于页面范围的状态，我使用存储-对于组件特定的状态，我只将其存储在那里。因为产品数据应该在存储中。所以我想更新商店。我只想将进程的进度/错误处理保持在组件中。