Question

我已经和react / flux一起工作了几个星期了，虽然我觉得我已经掌握了从异步加载到更新道具/状态/等等的所有东西，还有一件事情仍困扰着我是如何处理保存状态。

例如，在加载数据时，我的商店中只有一个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");
  }

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

Answer 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并仅从第二个发出更改。

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

1 个答案: