如何处理 React/Flux 中的保存状态？

Posted 2023-02-22

【中文标题】如何处理 React/Flux 中的保存状态？

【英文标题】：How to handle save states in React/Flux?

【发布时间】：2015-08-08 16:30:48

【问题描述】：

我已经用 react/flux 工作了几个星期了，虽然我觉得我已经很好地处理了从异步加载到更新 props/states/等的所有事情，但有一件事仍然困扰着我是如何处理保存状态。

例如，在加载数据时，我的商店中只有一个 isLoading 布尔参数，它被传递给我的组件。但是当我尝试将更新的对象发布到服务器时，这很简单：

触发更新操作 显示“正在保存”状态

但要弄清楚更新操作的结果似乎要困难得多。

我在这方面看到的最适用的帖子可能是Fluxxor's async data guide，但他们的解决方案（在对象上添加/修改状态属性）对我来说很容易出错。

  onAddBuzz: function(payload) 
    var word = id: payload.id, word: payload.word, status: "ADDING";
    this.words[payload.id] = word;
    this.emit("change");
  ,

  onAddBuzzSuccess: function(payload) 
    this.words[payload.id].status = "OK";
    this.emit("change");
  ,

  onAddBuzzFail: function(payload) 
    this.words[payload.id].status = "ERROR";
    this.words[payload.id].error = payload.error;
    this.emit("change");
  

是否有更好的方法来管理保存状态或向对象添加状态属性是最好的方法？

【参考方案1】：

我建议将“模型商店”和“ui 商店”分开，或者至少通过同一商店中的不同光标位置进行访问。因此，在您的情况下，您的“词模型”将有一个商店或分店，然后是“词状态”的另一个商店或分店。

虽然这增加了一些复杂性，例如打破存储间的逻辑并对AddBuzz 操作做出两次反应，但它最终通过将模型存储更新限制在模型数据的真实变化和管理 UI 状态来降低（更多）复杂性分开。

编辑

这就是 Relay 或多或少要做的事情，将持久化的数据保存在一个单独的自我管理的存储中，而将自定义存储只留下 ui 状态。 https://github.com/Yomguithereal/baobab 等其他一些库也推荐这种方法。这个想法是，这些是根本不同类型的状态。一种是特定领域的持久数据，另一种是特定于 ui 的临时应用程序状态。

它可能看起来像这样：

model_store.js：

onAddBuzz: function(payload) 
  var word = id: payload.id, word: payload.word;
  this.words[payload.id] = word;
  this.emit("change");
  

ui_store.js：

onAddBuzz: function(payload) 
  this.wordStates[payload.id] = 'ADDING';
  this.emit("change");

my_view_controller.js：

  // listen to both stores and pass down both words and wordStates to your views

my_word_view.js：

...

render: function() 
  var word = this.props.word,
      wordState = this.props.wordState;

  ...

如果您不想发出两个更改事件，请使用一个 waitFor 另一个并仅从第二个发出更改。

【讨论】：

您知道是否有任何好的、详细的博客/示例将您的“模型商店”和“ui 商店”分开？对我来说，这仍然是一个模棱两可的概念。看一个真实的例子（至少两个商店和一个相应的组件）会很有帮助。

你的例子帮助很大，谢谢。这似乎是一种更强大的处理方式。我要开始摆弄这种风格，看看效果如何。

好的，祝你好运@AndrewCross！如果您需要，很乐意回答更多问题。我们在生产环境中有一个以这种方式组织的 Flux/React 应用程序，而且效果非常好。协调商店/分店时偶尔会感到恼火，但不理会模型商店的简单性是值得的。