验证从 API Redux React 获取的数据

Question

那么，我就直奔主题吧。我从 api:

得到这样的数据

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

]

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

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

}

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

提前感谢您的回答；）

Answer 1

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

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

如果您需要根据 ID 访问电子邮件，您可以添加一个 ID 属性以及电子邮件和 isValid。 uuid 是一个很好的方法。

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

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

你在第二个例子中描述的就像保持两种不同的状态。我不建议这样做。

Answer 2

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

的逻辑时

如果您觉得从一开始就想把它放在商店中，并且数据永远不会处于瞬态状态，您可以在收到响应时通过 reducer 中的数组映射解析 DTO API。

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

我建议阅读 Tal Kol 的文章“在构建应用程序状态时避免意外的复杂性”，它完全回答了您的问题：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
  },
};

验证从 API Redux React 获取的数据

Validation of fetched data from API Redux React

api

validation

store

reactjs

redux