验证从 API Redux React 获取的数据

Question

所以，我会直奔主题。我正在从 api 获取此类数据：

[
{
    id: 123,
    email: asd@asd.com
},
{
    id: 456,
    email: asdasd.com
},
{
    id: 789,
    email: asd@asd
},
...

]

我应该验证电子邮件并将所有信息显示在一个列表中，如下所示：

1. asd@asd.com - 有效
2. asdasd.com - 无效
3. asd@asd - 无效 ...

我的问题是在商店中存储验证数据的最佳方式是什么？每封电子邮件都有类似“isValid”属性的东西会更好吗？我的意思是这样的：

store = {
emailsById: [
    123: {
        value: asd@asd.com,
        isValid: true
    },
    456: {
        value: asdasd.com,
        isValid: false
    },
    789: {
        value: asd@asd,
        isValid: false
    }
    ...
]

}

或类似的东西：

store = {
emailsById: [
    123: {
        value: asd@asd.com
    },
    456: {
        value: asdasd.com
    },
    789: {
        value: asd@asd
    }
    ...
],
inValidIds: ['456', '789']

}

哪个更好？或者也许还有其他更好的方法来存储此类数据？请记住，列表中可能有数千封电子邮件:)

提前感谢您的回答；）

Answer 1

我建议阅读 Tal Kol 的文章“Avoiding Accidental Complexity When Structuring Your App State”，它准确地回答了您的问题：https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a

你的例子非常简单，一切都取决于你的需求，但我个人会选择这样的东西（基于链接的文章）：

var store = {
  emailsById: {
    123: {
      value: '123@example.com',
    },
    456: {
      value: '456@example.com',
    },
    789: {
      value: '789@example.com',
    },
    // ...
  },
  validEmailsMap: {
    456: true, // true when valid
    789: false, // false when invalid
  },
};

Answer 2

因此，您最好的选择是创建一个包含所有验证方法的单独文件。将其导入您正在使用的组件中，然后在您想要使用有效/无效逻辑时。

如果您觉得从一开始就想将其放入存储中并且数据永远不会处于瞬态状态，那么当您从 API 获得响应时，您可以通过 reducer 中的数组映射来解析 DTO。

export default function (state = initialState, action) {
    const {type, response} = action

    switch (type) {
        case DATA_RECIEVED_SUCCESS:
            const items = []

            for (var i = 0; i < response.emailsById.length; i++) {
                var email = response.emailsById[i];

                email.isValid = checkEmailValid(email)

                items.push(email)
            }

            return {
                ...state,
                items
            }
    }
}

但是，我的偏好是始终在您需要的最后一刻进行检查。如果您发现将来需要更改设计，它会使其成为更安全的设计。此外，将验证逻辑分开将使其更具可测试性

Answer 3

首先，您在 javascript 中定义数组的方式是错误的。 你需要的是一个对象数组，例如，

emails : [
  {
    id: '1',
    email: 'abc@abc.com',
    isValid: true
  },
  {
    id: '2',
    email: 'abc.com',
    isValid: false;
  }
];

如果您需要基于 id 访问电子邮件，您可以添加 id 属性以及 email 和 isValid。 uuid 是个好方法。

总之，这取决于您的用例。

我相信，上面的示例是保存数据的好方法，因为它很简单。

您在第二个示例中描述的内容类似于维护两种不同的状态。我不建议这样做。