Validierung der abgerufenen Daten von API Redux React

Question

Also werde ich direkt auf den Punkt gehen. Ich erhalte diese Daten von api:

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

]

und ich möchte E-Mail bestätigen und zeigen diese alle Informationen in einer Liste, so etwas wie folgt aus:

1. asd@asd.com - gültig
2. asdasd.com - ungültig
3. asd asd @ - ungültig ...

Meine Frage ist, was ist die beste Möglichkeit, Validierungsdaten in einem Geschäft zu speichern? Ist es besser, etwas wie "isValid" -Eigenschaft von jeder E-Mail zu haben? Ich meine, wie folgt aus:

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

}

oder etwas ähnliches:

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

}

was ist besser? Oder gibt es vielleicht noch einen besseren Weg, solche Daten auf Lager zu haben? Haben Sie daran, dass es Tausende von E-Mails in einer Liste sein kann :)

Vielen Dank im Voraus für die Antworten;)

Answer 1

Ich empfehle den Artikel „Vermeidung unbeabsichtigter Komplexität Wenn Ihre App Staat Strukturierung“ Lesen von Tal Kol, die genau Ihr Problem antwortet: https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a

Ihr Beispiel ist recht Einfach und alles hängt wirklich von Ihren Bedürfnissen ab, aber persönlich würde ich mit so etwas gehen (basierend auf verlinktem Artikel):

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

Zunächst einmal so, wie Sie ein Array in Javascript definiert ist falsch. Was Sie brauchen, ist ein Array von Objekten wie,

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

wenn Sie den Zugriff auf E-Mail eine ID basiert tun müssen, erhalten Sie eine ID-Eigenschaft zusammen mit E-Mail und isValid hinzufügen können. uuid ist ein guter Weg, um darüber zu gehen.

Abschließend hängt es von Ihrem Anwendungsfall ab.

Ich glaube, das obige Beispiel ist ein guter Weg, um Daten im Speicher zu halten, weil es einfach ist.

Was Sie in Ihrem zweiten Beispiel beschrieben ist, wie zwei verschiedene Zustände aufrechterhalten wird. Ich würde das nicht empfehlen.

Answer 3

So Ihre beste Möglichkeit wäre, eine separate Datei zu erstellen, die alle Ihre Validierungen Methoden enthalten. Importieren Sie das in die von Ihnen verwendete Komponente und dann, wenn Sie die Logik für gültig/ungültig verwenden möchten.

Wenn es etwas ist, das Sie von Anfang an in den Speicher legen möchten und die Daten sich niemals in einem Übergangszustand befinden, können Sie Ihr DTO über eine Array-Map in Ihrem Reduzierer parsen, wenn Sie die Antwort von Ihrer API erhalten .

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 
      } 
    } 
} 

Aber meine Vorliebe wäre, immer im letzten Moment zu überprüfen, die Sie benötigen. Es macht es zu einem sichereren Design für den Fall, dass Sie feststellen, dass Sie Ihr Design in Zukunft ändern müssen.Auch wird die Validierungslogik heraus Trennung machen es mehr prüfbar