2016-10-09 6 views
1

У меня есть приложение для киоска (пользовательский интерфейс), и вам нужно описать различные сценарии оплаты.Redux-saga и возможность Forward/Backward

Чтобы описать элементы интерфейса, был выбран вариант React. Мне понравился Redux для одного направления потока данных. Но в этой архитектуре я не знал, где логика бизнеса описывает различные рабочие процессы. В исследовании я нашел замечательный модуль - редукс-сагу. Я понял, что этот модуль может быть как диспетчер процессов, и я обнаружил, что многие так думают.

Но с редукцией-сагой не все так ясно, как я и хотел, поэтому я пишу здесь свои вопросы.

Главное, что у меня есть один большой рабочий процесс, разделенный шагами. Например, процесс - оплата сотовой по номеру телефона. Это выглядит следующим образом: оплата

процесса клеточного:

  • Введите номер телефона

  • Интернет контрольный номер

    • Плохой ответ: Ошибка

      • назад: Введите p отточить номер
  • информация Confirm

  • Положите деньги

  • Сделать оплаты

    • Плохой ответ: Ошибка

      • Назад: Выход из процесса оплаты сотовой
  • Информация о сделке

В моем видении каждая стадия сага, которая будет вызывать из предыдущей стадии. Все круто, пока мне не нужно дать пользователю возможность перейти на предыдущий этап, например, от подтверждения назад, чтобы ввести номер телефона.

Вопрос, как управлять этапами в моем основном рабочем процессе, если я могу переходить с одного этапа на другой и вернуться?

Спасибо за ответы!

ответ

1

Пожалуйста, проверьте пример «Мастер» в redux-saga-examples.

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

Этот пример имеет 3 страницы мастера "Пуск", "проверить", и "платить". шаг «проверка» - это шаг подтверждения, подтверждающий адрес электронной почты, указанный на этапе «старт». Если проверка завершается успешно, мастер переходит к шагу «платить». Если нет, вы вернетесь к шагу «начать».

В дополнение к этим нормальным потокам вы можете вручную вернуться к шагу «начать» с шага «проверка» во время проверки (это занимает 5 секунд). Продолжающийся процесс проверки будет отменен, когда вы вернетесь к шагу «начать».

+0

Спасибо! Еще один полезный пример: https://github.com/yelouafi/redux-saga/issues/576#issuecomment-252557319 –