从API Redux React验证获取的数据

时间:2017-05-18 18:09:58

标签: api validation reactjs redux store

所以,我会直截了当地说。我从api获得了这样的数据:

byte[] image = GetImage(selectedUrl);
using (var ms = new MemoryStream(image))
{

    Image img = new Image.FromStream(ms);
    Bitmap bmp = new Bitmap(img);
}

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

  1. asd@asd.com - 有效
  2. asdasd.com - 无效
  3. asd @ asd - 无效 ...
  4. 我的问题是在商店中存储验证数据的最佳方法是什么?每封电子邮件都有“isValid”属性更好吗?我的意思是这样的:

    if(typeof results !== "undefined" && results.length > 0){
        $("#Search-Results").html("");
    }
    
    for(var i=0; i < results.length; i++) {
          var s = '<span><img src="http://example.com/test.jpg"> </span>'; 
          $("#Search-Results").append(s);
    }
    

    }

    或类似的东西:

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

    }

    哪一个更好?或者也许还有另一种更好的方法来存储这样的数据?请记住,列表中可能有数千封电子邮件:)

    提前感谢您的答案;)

3 个答案:

答案 0 :(得分:0)

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

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

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

总之,这取决于您的使用案例。

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

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

答案 1 :(得分:0)

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

如果您认为自己想要从头开始放入商店并且数据永远不会处于暂时状态,那么当您从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
            }
    }
}

但是我的偏好是始终在你需要的最后一刻检查。如果您发现将来需要更改设计,它将使其成为更安全的设计。将验证逻辑分开也会使其更易于测试

答案 2 :(得分:0)

我建议您阅读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
  },
};