2016-10-09 4 views
1

Ich habe Kiosk-Anwendung (Benutzeroberfläche) entwickelt, und müssen verschiedene Szenarien der Zahlung beschreiben.Redux-saga und Forward/Backward Opportunity

Um UI-Elemente zu beschreiben, wurde ein React gewählt. Ich mochte den Redux für die eine Richtung des Datenflusses. Aber in dieser Architektur wusste ich nicht, wo die Geschäftslogik verschiedene Arbeitsabläufe beschreiben sollte. In der Forschung fand ich das wundervolle Modul - Redux-Saga. Ich habe verstanden, dass dieses Modul wie ein Prozessmanager sein kann, und ich fand, dass viele Leute so dachten.

Aber mit Redux-Saga nicht alle so klar, wie ich wollte, also schreibe ich hier meine Fragen.

Hauptgedanke, dass ich einen großen Workflow habe, getrennt mit Schritten. Zum Beispiel, Prozess - Zahlung Mobilfunk nach Telefonnummer. Es ist wie folgt aussehen:

Prozess Zahlung zellulären:

  • Telefonnummer

  • Online Prüfnummer

    • Bad Antwort eingeben: Fehler

      • Rückwärts: Geben Sie p ein schärfen Anzahl
  • Bestätigen Informationen

  • das Geld Put

  • Zahlung ausführen

    • Bad Antwort: Fehler

      • Rückwärts: Beenden von Prozess Zahlung zellulären
  • Informationen über Transaktion

In meiner Vision ist jede Stufe eine Saga, die aus früherem Stadium nennen. Es ist alles cool, bis ich dem Benutzer eine Gelegenheit geben muss, zur vorherigen Stufe zu gehen, zum Beispiel von Bestätigung zurück zu Telefonnummer eingeben.

Also Frage, wie man Phasen in meinem Hauptarbeitsablauf verwaltet, wenn ich von einer Bühne zur anderen weiterleiten kann, und gehe zurück?

Danke für die Antworten!

Antwort

1

Bitte überprüfen Sie "Wizard" Beispiel in redux-saga-examples.

Demo: http://kuy.github.io/redux-saga-examples/wizard.html
Code: https://github.com/kuy/redux-saga-examples/tree/master/wizard

Dieses Beispiel hat drei Seiten des Assistenten auf "Start", "überprüfen" und "bezahlen". Der Schritt "Verify" ist ein Bestätigungsschritt, der eine E-Mail-Adresse bestätigt, die im Schritt "Start" angegeben wurde. Wenn die Überprüfung erfolgreich ist, leitet der Assistent zum Schritt "Bezahlen" weiter. Wenn nicht, werden Sie zum "Start" -Schritt zurückkehren.

Zusätzlich zu diesen normalen Abläufen können Sie während der Verifizierung manuell vom Schritt "Verify" zum Schritt "Start" zurückkehren (dies dauert 5 Sekunden). Der laufende Verifizierungsprozess wird abgebrochen, wenn Sie zum Schritt "Starten" zurückkehren.

+0

Vielen Dank! Ein weiteres nützliches Beispiel: https://github.com/yelouafi/redux-saga/issues/576#issuecomment-252557319 –

Verwandte Themen