试图理解Flux存储——所以如果状态保存在存储中，这也是我进行数据库调用的地方吗

Trying to understand Flux stores - so if the state is held in the store, is this also where I do database calls?

本文关键字：存储 数据库 调用 方吗 存在 Flux 保存 状态 如果      更新时间：2023-09-26

我正在尝试构建一个联系人列表应用程序来自学reactjs，现在我正在学习fluxible。

1） 输入了一个新联系人。提交后，会创建一个newContact对象，其中包含：

  • firstName
  • 姓氏
  • 电子邮件
  • phone1（最多可添加3部手机）
  • 图片（现在只是一个文本字段，您可以添加URL。）

2） 这个newContact对象作为有效载荷发送到我的createNewContactAction，调度员会收到新联系人的"警报"。

3） 此时，ContactStore开始发挥作用。。这就是我陷入困境的地方。

我已经把我的目标做到了这一点。如果我想把这个对象保存到我的数据库中，我会在这里这样做吗？

我有点不知道下一步该做什么。我的最终目标是显示列表中的所有联系人，所以我需要将每个新联系人添加到的某个位置，这样我就可以提取所有联系人。

有人能给我指正确的方向吗？

在调用createNewContactAction函数之前，我会向服务器发出保存newContact对象的请求。如果保存成功，则可以调用createNewContactAction将newContact对象存储在ContactStore中。如果它不成功，那么你可以做一些错误处理。

为了理解为什么我认为这种模式在大多数情况下更可取，假设您将联系人保存在商店中，然后尝试将其保存在数据库中，但由于某种原因，尝试将其存储在数据库中失败。现在存储区和数据库不同步，您必须撤消对存储区的所有更改才能使它们恢复同步。首先确保数据库保存成功，可以更容易地保持存储和数据库的同步。

在某些情况下，你可能想在数据库之前将数据存储在存储中，但用户提交的表单中包含你想保存在数据库中的数据可能不是其中之一。

我喜欢创建一个额外的文件来处理我的API调用，将所有xhttp调用放在商店中会很快使事情变得混乱。我通常用我的商店来命名它，所以在这种情况下，类似于"contacts-api.js"。在api文件中，我导出一个带有我需要的所有api方法的对象。例如对xhttp请求使用超级代理：

module.exports = {
  createNewContact: function(data, callback) {
    request
      .post('/url')
      .send(data)
      .end(function(res, err) {
        if (callback && typeof callback === 'function') {
          callback(res, err);
        }
      });
  }
}

我通常会为每个请求创建3个操作。第一个是用数据触发初始请求，第二个是用结果成功，最后一个是错误。

你的每个操作的存储方法可能最终看起来像这样：

onCreateNewContactRequest: function(data) {
  api.createNewContact(data, function(res, err) {
    if (err) {
      ContactsActions.createNewContactError(err);
    } else {
      ContactsActions.createNewContactSuccess(res);
    }
  });
},
onCreateNewContactSuccess: function(res) {
  // save data to store
  this.newContact = res;
},
onCreateNewContactError: function(err) {
  // save error to store
  this.error = err;
}

DB调用最好由操作创建者进行。存储应该只包含数据。

相关文章：