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

Question

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

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

触发更新操作
显示一个"save in progress"状态

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

可能最适用的 post 我在 Fluxxor's async data guide 中看到过，但他们的解决方案（adding/modifying 状态属性在对象上）感觉错误- 倾向于我。

  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

我建议将 "model stores" 和 "ui stores" 分开，或者至少通过同一商店中的不同光标位置访问。因此，在您的情况下，您的 "word model" 有一家商店或分店，然后 "word status."

有另一家商店或分店

虽然这会以分解存储之间的逻辑并对 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 中的保存状态？

How to handle save states in React/Flux?

flux

reactjs

reactjs-flux