gpt4 book ai didi

reactjs - 如何处理 React/Flux 中的保存状态?

转载 作者:行者123 更新时间:2023-12-03 13:46:36 26 4
gpt4 key购买 nike

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

例如,在加载数据时,我的存储中只有一个 isLoading bool 参数,该参数会传递给我的组件。但是当我尝试将更新的对象发布到服务器时,这很简单:

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

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

可能我见过的最适用的帖子是 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");
}

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

最佳答案

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

虽然这会以打破存储之间的逻辑并对 AddBuzz 操作做出两次 react 的形式增加一些复杂性,但它最终会通过将模型存储更新限制为模型中的真实更改来降低(更多)复杂性数据和管理 UI 状态分开。

编辑

这就是 Relay 或多或少要做的事情,将持久数据保存在单独的 self 管理存储中,而只保留 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 另一个事件,然后仅从第二个事件发出更改。

关于reactjs - 如何处理 React/Flux 中的保存状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30468047/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com