Also habe ich vor einer Woche angefangen, React zu lernen, und ich bin unweigerlich auf das Problem des Zustands gestoßen und wie Komponenten mit dem Rest der App kommunizieren sollen. Ich habe mich umgesehen und Redux scheint der Geschmack des Monats zu sein. Ich habe mir die gesamte Dokumentation durchgelesen und finde, dass es eigentlich eine ziemlich revolutionäre Idee ist. Hier meine Gedanken dazu:
Staat wird allgemein als ziemlich böse und eine große Quelle von Fehlern in der Programmierung angesehen. Anstatt alles in Ihrer App zu verteilen, sagt Redux, warum nicht alles in einem globalen Zustandsbaum konzentrieren, den Sie ändern müssen, um Aktionen auszuführen? Hört sich interessant an. Alle Programme benötigen einen Status, also stecken wir ihn in einen unreinen Bereich und modifizieren ihn nur von dort aus, damit Fehler leicht aufzuspüren sind. Dann können wir auch einzelne Zustandsteile deklarativ an React-Komponenten binden und sie automatisch neu zeichnen lassen, und alles ist schön.
Allerdings habe ich zwei Fragen zu diesem ganzen Design. Zum einen, warum muss der Zustandsbaum unveränderlich sein? Angenommen, ich interessiere mich nicht für Zeitreise-Debugging, Hot Reload und habe bereits Rückgängig/Wiederherstellen in meiner App implementiert. Es scheint nur so umständlich, dies tun zu müssen:
case COMPLETE_TODO:
return [
...state.slice(0, action.index),
Object.assign({}, state[action.index], {
completed: true
}),
...state.slice(action.index + 1)
];
An Stelle von:
case COMPLETE_TODO:
state[action.index].completed = true;
Ganz zu schweigen davon, dass ich ein Online-Whiteboard erstelle, nur um zu lernen, und jede Zustandsänderung so einfach sein könnte wie das Hinzufügen eines Pinselstrichs zur Befehlsliste. Nach einer Weile (Hunderte von Pinselstrichen) kann das Duplizieren dieses gesamten Arrays extrem teuer und zeitaufwändig werden.
Ich bin mit einem globalen Zustandsbaum einverstanden, der unabhängig von der Benutzeroberfläche ist, die über Aktionen verändert wird, aber muss er wirklich unveränderlich sein? Was ist falsch an einer einfachen Implementierung wie dieser (sehr grober Entwurf. geschrieben in 1 Minute)?
var store = { items: [] };
export function getState() {
return store;
}
export function addTodo(text) {
store.items.push({ "text": text, "completed", false});
}
export function completeTodo(index) {
store.items[index].completed = true;
}
Es ist immer noch ein globaler Zustandsbaum, der durch ausgegebene Aktionen verändert wurde, aber extrem einfach und effizient ist.
„Zum einen, warum muss der Zustandsbaum unveränderlich sein?“ — dann müssen Sie einen Algorithmus bereitstellen, um festzustellen, ob sich Daten geändert haben. Es ist nicht möglich, es für eine beliebige Datenstruktur zu implementieren (wenn sie veränderlich ist). Nehmen
immutablejs
und verwendenreturn state.setIn([action.index, 'completed'], true);
Boilerplate zu reduzieren.– zerkms
29. Oktober 2015 um 20:46 Uhr
PS:
return state.map(i => i.index == action.index ? {...i, completed: true} : i);
– zerkms
29. Oktober 2015 um 20:52 Uhr