In dem Kapitel zum Entwerfen der Statusform wird in den Dokumenten vorgeschlagen, Ihren Status in einem Objekt mit ID zu speichern:
Behalten Sie jede Entität in einem Objekt bei, das mit einer ID als Schlüssel gespeichert ist, und verwenden Sie IDs, um auf sie von anderen Entitäten oder Listen zu verweisen.
Sie sagen weiter
Stellen Sie sich den Status der App als Datenbank vor.
Ich arbeite an der Statusform für eine Liste von Filtern, von denen einige geöffnet sind (sie werden in einem Popup angezeigt) oder ausgewählte Optionen haben. Als ich "Stellen Sie sich den Status der App als Datenbank vor" las, dachte ich darüber nach, sie als JSON-Antwort zu betrachten, da sie von einer API zurückgegeben wird (die selbst von einer Datenbank unterstützt wird).
Also dachte ich daran
[{
id: '1',
name: 'View',
open: false,
options: ['10', '11', '12', '13'],
selectedOption: ['10'],
parent: null,
},
{
id: '10',
name: 'Time & Fees',
open: false,
options: ['20', '21', '22', '23', '24'],
selectedOption: null,
parent: '1',
}]In den Dokumenten wird jedoch ein ähnliches Format vorgeschlagen
{
1: {
name: 'View',
open: false,
options: ['10', '11', '12', '13'],
selectedOption: ['10'],
parent: null,
},
10: {
name: 'Time & Fees',
open: false,
options: ['20', '21', '22', '23', '24'],
selectedOption: null,
parent: '1',
}
}Theoretisch sollte es keine Rolle spielen, solange die Daten serialisierbar sind (unter der Überschrift "State") .
Also ging ich glücklich mit dem Ansatz der Anordnung von Objekten vor, bis ich meinen Reduzierer schrieb.
Mit dem objektschlüsselgesteuerten ID-Ansatz (und der liberalen Verwendung der Spread-Syntax) wird der OPEN_FILTERTeil des Reduzierers
switch (action.type) {
case OPEN_FILTER: {
return { ...state, { ...state[action.id], open: true } }
}Während der Array-of-Objects-Ansatz ausführlicher ist (und von der Hilfsfunktion abhängt)
switch (action.type) {
case OPEN_FILTER: {
// relies on getFilterById helper function
const filter = getFilterById(state, action.id);
const index = state.indexOf(filter);
return state
.slice(0, index)
.concat([{ ...filter, open: true }])
.concat(state.slice(index + 1));
}
...Meine Fragen sind also dreifach:
1) Ist die Einfachheit des Reduzierers die Motivation für den objektschlüsselgesteuerten Ansatz? Gibt es andere Vorteile für diese Zustandsform?
und
2) Es scheint, dass der objektschlüsselgesteuerte Ansatz es schwieriger macht, mit Standard-JSON-Ein- / Ausgängen für eine API umzugehen. (Deshalb habe ich mich in erster Linie für das Array von Objekten entschieden.) Wenn Sie sich also für diesen Ansatz entscheiden, verwenden Sie einfach eine Funktion, um sie zwischen dem JSON-Format und dem Statusformformat hin und her zu transformieren? Das scheint klobig. (Wenn Sie diesen Ansatz befürworten, ist dies Teil Ihrer Argumentation, dass dies weniger klobig ist als der oben beschriebene Reduzierer für Objektarrays?)
und
3) Ich weiß, dass Dan Abramov Redux so entworfen hat, dass es theoretisch unabhängig von Zustandsdatenstrukturen ist (wie in "Konventionell ist der Zustand der obersten Ebene ein Objekt oder eine andere Schlüsselwertsammlung wie eine Karte, aber technisch kann es jede sein." Typ , " Betonung meiner). Aber angesichts der obigen Ausführungen ist es nur "empfohlen", ein Objekt mit ID zu versehen, oder gibt es andere unvorhergesehene Schwachstellen, auf die ich stoßen werde, wenn ich eine Reihe von Objekten verwende, die es so machen, dass ich das einfach abbrechen sollte planen und versuchen, bei einem Objekt zu bleiben, das mit einem ID versehen ist?
sort_by? const sorted = _.sortBy(collection, 'attribute');