2017-02-02 4 views
0

Ich bin neu zu Reagieren und haben eine mehrstufige Profilerstellungsform. Ich habe nach einem optimalen Anwendungsfall für SessionStorage gesucht, aber niemand scheint auf die eine oder andere Weise sehr leidenschaftlich zu sein. Zur Zeit habe ich die Form eine Hauptkomponente ist:Multistep Formular mit SessionStorage reagieren

render() { 
switch (this.state.step) { 
    case 2: 
    return <Step nextStep={this.nextStep} prevStep={this.prevStep} /. 
    case 3: 
    return <Step nextStep={this.nextStep} prevStep={this.prevStep} /> 
    case 4: 
    return <Step nextStep={this.nextStep} prevStep={this.prevStep} /> 
    case 5: 
    return <Step nextStep={this.nextStep} prevStep={this.prevStep} /> 
    default: 
    return <Step nextStep={this.nextStep} /> 
} 
} 

Jeder dieser Schritte hat mehrere Eingabefelder und ich frage mich, ob es eine schlechte Praxis, diese Werte in session in ihrer Komponente (oder local) anstatt Zustand zu speichern war oder einen redux Store und sende sie an das Backend, sobald alle Felder gesammelt wurden.

Antwort

0

Kommt drauf an. Ich würde sagen, dass Sie einen sehr spezifischen Grund benötigen, um es in Sitzung oder lokalem Speicher zu speichern. Der Grund könnte sein, dass Sie die Formularfelder beibehalten müssen, selbst wenn der Benutzer die Seite aktualisiert.

Sie können Redux weiterhin zusammen mit lokalem Speicher verwenden. Sie verwenden nur Ihren lokalen Speicher, um den Redux-Status zu initialisieren und den lokalen Speicher mithilfe von Redux-Aktionen zu aktualisieren.

Wenn Sie also mit Redux beginnen, können Sie den sitzungslokalen Speicher jederzeit später hinzufügen, wenn Sie sich dazu entschließen, dass die Eingaben zwischen den Sitzungen wirklich persistent sind.

+0

Es wäre nett, persistent zu sein über Aktualisierungen (obwohl nicht benötigt). Es ist hauptsächlich so, dass es in diesem Fall viel schneller von einer Lösung geht (fügen Sie einfach die Werte bei jedem Klick auf eine nächste Schaltfläche zum sessionStorage hinzu), aber wenn dies Sicherheitslücken/schlechten Code einführt, werde ich die längere Lösung verwenden ein Redux-Geschäft. – mikeg542

+0

Auf lange Sicht denke ich, dass es nicht schneller sein wird. Die Verwendung von Redux - oder etwas Ähnlichem - ist eine (besser) strukturierte und deterministische Methode zur Verwaltung Ihres Anwendungsstatus. Und es erlaubt Ihnen immer noch, es z. lokalen Speicher usw., später, wenn Sie feststellen, dass Sie es wirklich brauchen. Wenn Sie nur schnell und schmutzig wollen, gibt es keinen Grund, Session-LocalStorage überhaupt zu verwenden. Sie könnten Ihren Status einfach in einem globalen Objekt behalten. –

+1

Also die allgemeine Antwort ist, es ist nicht schlecht persay, aber es ist es definitiv wert, die Zeit zu verbringen, um es richtig mit redux von Anfang an zu tun. Habe ich, danke! – mikeg542

0

Lass uns über den Bestellprozess sprechen, denn das mache ich gerade in einem Projekt. Der Bestellvorgang besteht aus Schritten mit mehreren Formularen.

  • Whole Order-Status wird irgendwo gespeichert (sei es Status in übergeordneten Komponenten, Redox-Speicher, lokaler Speicher oder eine Kombination davon).
  • Jeder Schritt/Formular selbst aktualisiert nur den zugehörigen Abschnitt des Bestellstatus - Abschnitt, an dem das Formular interessiert ist.
  • auf Formular senden, gibt es einen Mechanismus, der das Formular validiert und erlaubt oder den Übergang zum nächsten Schritt nicht erlaubt (mehr dazu unten))
  • Übergang von Schritt A nach B (oder B nach C oder jeder andere) wird mit Finite State Machine verwaltet. Es enthält den aktuellen Status der Anweisung (die angibt, welche Form wiedergegeben werden soll), die Definition der Schritte und den Statusübergang zwischen den Schritten.

    Beim Übergang wird ein Haken ausgelöst, wenn er registriert ist. Das Ergebnis des Hooks signalisiert, ob der Zustandsautomat den Übergang zulassen und den Status aktualisieren soll. Hooks können sync oder async sein ...

    Nun, das ist Theorie.

    Finite State Machine meiner Wahl https://github.com/jakesgordon/javascript-state-machine/tree/v3

    Implementierung gebunden zu projizieren.

    Verwandte Themen