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

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

1） 输入一个新联系人。提交后，将创建一个包含以下内容的

newContact

对象：

• 名字
• 姓氏
• 电子邮件
• 电话1（最多可添加3部电话）
• 图像（现在它只是一个文本字段，您可以添加URL…）

2） 此

newContact

对象作为有效负载发送到my

createNewContactAction

，并“提醒”调度程序已建立新联系人

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

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

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

---

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

在调用createNewContactAction函数之前，我会请求服务器保存newContact对象。如果保存成功，则可以调用createNewContactAction将newContact对象存储在ContactStore中。如果失败，那么您可以执行一些错误处理

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

---

在某些情况下，您可能希望在数据库之前将数据存储在存储中，但用户提交包含您希望保存在数据库中的数据的表单可能不属于这种情况。

我喜欢创建一个附加文件来处理API调用，在存储中使用所有xhttp调用可能会很快使事情变得混乱。我通常用我的商店来命名它，所以在本例中类似于“contacts api.js”。在api文件中，我导出一个对象，其中包含我需要的所有api方法。例如，对xhttp请求使用superagent：

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调用最好由动作创建者进行。存储应该只包含数据。

谢谢您的回复。如果你不介意的话，我有一个后续问题。为了调用将对象保存到我的数据库中，我会使用类似fluxible fetchr的东西吗？我不确定。实际上，我从来没有使用过Fluxible，甚至是同构React，所以我不想在这个话题上误导你们。但是我关于在存储到存储区之前尝试保存到数据库的建议仍然有效。我知道您使用的是Flux，但是如果您想尝试避免这一切，并尝试使用不同的方法将数据提取/推送到服务器，请查看。我经历了和你一样的挣扎，最终写了这个库来让事情变得更简单，并且完全避免存储。