Как обрабатывать состояние формы с помощью Formik и Redux-Saga

Question

Я недавно начал использовать Redux-Saga в проекте React, поскольку он был для меня новым, и я хотел узнать, как он работает.Я также начал использовать Formik, поскольку он, похоже, затмил популярность Redux-Form для управления формами в приложениях React.Теперь я понимаю обоснование Дана Абрамова «использовать React для эфемерного состояния, которое не имеет значения для приложения в глобальном масштабе и не мутирует сложным образом».

Но это, похоже, противоречит схеме SOMETHING_REQUESTED -> apiCall -> SOMETHING_SUCCESS or SOMETHING_FAILURE выложено в документации Redux-Saga.Например, если у меня есть форма, которая отправляет какое-то действие onSubmit, которое сага «выполняет» для выполнения асинхронного запроса, я не вижу способа информировать мою форму о состоянии этого запроса, не сохраняя его где-нибудь в состоянии Redux.(точный антипаттерн, которого мы хотим избежать).Одна альтернатива, которую я могу себе представить, - это выполнить запрос в обработчике отправки формы, а не делегировать его в сагу, но тогда меня удивляет, в чем смысл Redux-Saga?

Пожалуйста, помогите заполнитьпробелы в моем понимании.

Редактировать: К вашему сведению эта проблема GitHub в репозитории redux-saga кажется наиболее актуальной для моего вопроса, и, хотя там написано много, она, похоже, не поступаетпо согласованной наилучшей практике.

Этот поток reddit также имеет отношение к этой теме, но, как и в разделе темы, мне интересно, почему решение, которое он нашел в Redux Promise Listener не более широко принят?

Answer 1

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

Правильно, этого достаточно для обработки загрузки файла.Использование redux-saga для этой операции будет чрезмерным уничтожением.Я считаю, что нужно стремиться выбрать правильный инструмент для данной задачи.

, но тогда это заставляет меня задуматься, в чем смысл redux-Saga?

Рассмотрим redux-saga как «менеджера процессов» для выполнения асинхронной операции как синхронизации.Иногда ожидается поток кода, и никаких сюрпризов не будет.Хотя иногда это не так, поскольку существует инверсия управления, вызванная побочными эффектами (например, вызовами API).Поэтому, вызывая неожиданности и неуверенность относительно того, когда мы получим наш ответ.

Я не вижу способа информировать мою форму о состоянии этого запроса, не сохраняя его где-нибудь в состоянии Redux

В этой демонстрации я использую redux-saga вместе с Formik для управления 2 вещами:

1. вызов API для POSTзагрузка файла в конечную точку.
2. uploading флаг для управления пользовательским интерфейсом, пока пользователь ожидает загрузки файла

redux обрабатывает только uploading,тогда как остальные значения обрабатываются formik и redux-saga, что помогает обеспечить лучший опыт пользователя (у пользователя есть индикатор uploading для того, что происходит в пользовательском интерфейсе) и developer-experience (мы контролируем поток выполнения в саге, yield отправляя ответ).