Also habe ich vor einer Woche angefangen, React zu lernen, und bin unweigerlich auf das Problem des Zustands und der Art und Weise gekommen, wie Komponenten mit dem Rest der App kommunizieren sollen. Ich habe mich umgesehen und Redux scheint der Geschmack des Monats zu sein. Ich habe die gesamte Dokumentation durchgelesen und denke, dass dies eine ziemlich revolutionäre Idee ist. Hier sind meine Gedanken dazu:
Der Staat ist im Allgemeinen ziemlich böse und eine große Quelle von Fehlern in der Programmierung. Anstatt alles in Ihrer App zu verteilen, sagt Redux, warum nicht einfach alles in einem globalen Statusbaum konzentriert haben, für den Sie Aktionen ausgeben müssen, um Änderungen vorzunehmen. Klingt interessant. Alle Programme benötigen einen Status. Lassen Sie uns ihn also in einem unreinen Bereich speichern und nur von dort aus ändern, damit Fehler leicht aufgespürt werden können. Dann können wir auch einzelne Statuselemente deklarativ an React-Komponenten binden und sie automatisch neu zeichnen lassen, und alles ist schön.
Ich habe jedoch zwei Fragen zu diesem gesamten Design. Zum einen, warum muss der Staatsbaum unveränderlich sein? Angenommen, mir ist das Debuggen von Zeitreisen und das Hot-Reload egal und ich habe bereits das Rückgängigmachen / Wiederherstellen in meiner App implementiert. Es scheint einfach 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, um zu lernen, und jede Statusänderung kann so einfach sein 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 Statusbaum einverstanden, der unabhängig von der Benutzeroberfläche ist, die über Aktionen mutiert ist. Muss er jedoch wirklich unveränderlich sein? Was ist falsch an einer einfachen Implementierung wie dieser (sehr grober Entwurf. In 1 Minute geschrieben)?
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 mutiert, aber äußerst einfach und effizient ist.
immutablejs
und verwenden Siereturn state.setIn([action.index, 'completed'], true);
, um Boilerplate zu reduzieren.