Umgang mit vielen Texteingabe Änderungen in Redux

Question

Ich baue eine kleine App in Redux, und frage mich, in welchem ​​Umfang alle Statusänderungen sollten durch Redux Reduktoren & der zentrale Speicher propagieren.

Ist es beispielsweise besser für einzelne Texteingaben, ihren eigenen Status innerhalb ihrer eigenen Komponente zu verwalten (über setState)? Oder sollten Aktionen als Reaktion auf jedes einzelne Keydown-Ereignis in diesen Eingaben ausgelöst werden. Wenn ja, frage ich mich, ob es ein Leistungsproblem geben könnte.

Alles in allem, was ist die beste Vorgehensweise für die Handhabung kleinerer UI-Updates, wie z. B. Tastendruckereignisse in Redux?

Answer 1

Redux dient zur vorhersehbaren Verwaltung des Status. Status bedeutet Daten, und dies gilt gleichermaßen für Daten von einer API oder von der Client-UI.

In einer kleinen App würde ich mit der Vision von alle Zustand redux-ed beginnen, bis ich wirklich tatsächlich in Leistungsprobleme laufen. Dazu gehören visueller Status, Menüs, Benutzereingaben.

Der Redux-State-Tree kann stark optimiert werden, um eine Vielzahl von Eingaben und Updates durch Reduzierungen zu verarbeiten. Zum großen Teil, weil es sich um unveränderliche Objekte handelt, die als Referenz übergeben werden.

Ich habe Produktions-Apps geschrieben, die Status mit Redux verwalten, die große Updates über Websockets alle 100ms verarbeiten können, und komplexe Menüaktionen wie visuelle Datumskomponenten haben, und sie haben alle gut zusammen gespielt.

Um Ihr Vertrauen zu stärken, hier ist ein tweet from Dan Abramov.

ps. Im schlimmsten Fall, wenn Sie Leistungsprobleme mit den Eingaben sehen, könnten Sie einfach das Eingabefeld entprellen.

Answer 2

Wenn Sie diese Eingabewerte nicht außerhalb von Eingabe-Komponenten benötigen, können Sie sie im lokalen Status speichern, anstatt den Redux-Status zu verwenden.

Der globale Redux-Status sollte in den meisten Fällen Daten enthalten, die von vielen Komponenten verwendet werden.

Answer 3

Wenn die Texteingabewerte global in Ihrer App benötigt werden, ist es besser, sie im Redux-Speicher zu speichern. Andernfalls können Sie es in Ihrem lokalen Zustand speichern, sagen Sie, rect component state, wenn Ihre App eine react-redux-App ist.

Und ob bei jedem Tastendruck eine Aktion ausgelöst wird, hängt von Ihrem Anwendungsfall ab. Nehmen wir an, Sie schreiben etwas in ein Beschreibungsfeld. Die Beschreibung kann langwierig sein und Sie müssen bei jedem Tastendruck keine Aktion für einen Serviceaufruf senden, da dies zu vielen unnötigen Serviceaufrufen führen würde. Eine Möglichkeit, dieses Problem zu lösen, besteht darin, eine Aktion nur dann zu versenden, wenn der Benutzer zwischen den Tastenanschlägen pausiert. Debounce ist ein Javascript-Plugin, mit dem solche Szenarien abgedeckt werden können. Mit Debounce können Sie die Verzögerung für das Absenden von Aktionen konfigurieren. Sie können das Debounce-Plugin hier überprüfen: https://github.com/component/debounce.