验证从API Redux React获取的数据

所以，我将直截了当地说。我从api获得了这样的数据：

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

]

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

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']

asd@asd.com-有效

asdasd.com-无效

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']

}

或者像这样：

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']

}

哪一个更好？或者也许有其他更好的方法来存储这些数据？请记住，列表中可能有数千封电子邮件：）

---

提前感谢您的回答；）

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

电子邮件：[
{
id:'1'，
电邮:'abc@abc.com',
有效：对
},
{
id:'2'，
电子邮件：“abc.com”，
isValid:false；
}
];所以最好的选择是创建一个单独的文件，其中包含所有验证方法。将其导入到正在使用的组件中，然后在需要使用有效/无效逻辑时导入

如果您觉得从一开始就想将其放入存储中，并且数据永远不会处于瞬态状态，那么当您从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
            }
    }
}

导出默认函数（状态=初始状态，操作）{
常量{type，response}=action
开关（类型）{
获得成功的案例数据：
常量项=[]
对于（var i=0；i

然而，我的偏好是总是在你需要检查的最后一刻检查。它使它成为一种更安全的设计，以防您发现将来需要更改您的设计。另外，分离验证逻辑将使其更易于测试
我建议阅读Tal Kol的文章“在构建应用程序状态时避免意外复杂性”，这篇文章正好回答了您的问题：

您的示例非常简单，一切都取决于您的需要，但就我个人而言，我会选择以下内容（基于链接文章）：

我想这真的取决于你对这些数据做了什么。我可能会把所有的东西都放在一起，这样你就可以根据需要进行过滤和排序。例如，如果您将它们放在单独的数组中，那么您必须按电子邮件地址或其他字段对列表进行排序。是的，我知道我可以用两种方式存储数据。但我的问题是哪条路是正确的？人们通常如何在redux存储中存储数据？我对所有redux的东西都是新手，所以我只是试着从一开始就“以正确的方式”做事。：）谢谢你的回答关于数组的正确性，它实际上不是点，“id”也不是点。我的问题是，在存储中存储数据的正确方法是什么？我的例子只是一个简单的例子，有更多的数据。最后应该有一个类似于表的东西，每个单元格都经过验证。它应该是这样的：id | email | date | user | url，并且在列表中显示这些值之前，应该对它们进行验证。我知道我可以用两种方式存储数据，但哪一种是在存储中存储数据的“正确”方式呢实际上，您错了，这是初始化数组的一个非常有效且常用的用法