0

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

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

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

2) 此newContact对象作为有效负载发送到 my createNewContactAction，并且调度程序“警告”已建立新联系人。

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

我已经得到了我的目标。如果我想将此对象保存到我的数据库中，我会这样做吗？

我有点困惑下一步该做什么。我的最终目标是在列表中显示所有联系人，因此我需要将每个新联系人添加到某处，以便我可以提取所有联系人。

有人可以指出我正确的方向吗？

4

3 回答 3

0

理想情况下，数据库调用应该由动作创建者进行。商店应该只包含数据。

于 2015-12-27T23:05:02.803 回答
0

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

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

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

于 2015-12-27T19:24:34.890 回答
0

我喜欢创建一个额外的文件来处理我的 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;
}
于 2015-12-27T22:46:50.117 回答