How to handle form state with Formik and Redux-Saga

Question

I recently started using Redux-Saga in a React project since it was new to me and I wanted to learn how it works. I also started using Formik since it appears to have eclipsed Redux-Form in popularity for managing forms in React applications. Now, I understand Dan Abramov's rationale to "use React for ephemeral state that doesn't matter to the app globally and doesn't mutate in complex ways."

But this seems at odds with the pattern of SOMETHING_REQUESTED -> apiCall -> SOMETHING_SUCCESS or SOMETHING_FAILURE laid out in Redux-Saga's documentation. For example, if I have a form that dispatches some action onSubmit that a saga "takes" to perform the asynchronous request, I don't see a way to keep my form apprised of the status of that request without storing it in Redux state somewhere (the exact antipattern we want to avoid). One alternative I could imagine is to perform the request within the form submission handler and not delegate it to a saga, but then that makes me wonder, what is the point of Redux-Saga?

Please help fill in the gaps in my understanding.

Edit: FYI this GitHub issue on the redux-saga repo seems most pertinent to my question, and while there is much written there it doesn't seem to arrive at an agreed best practice.

This reddit thread also deals with this topic, but similar to the thread's OP, I wonder why the solution he found in Redux Promise Listener is not more widely adopted?

Answer 1

One alternative I could imagine is to perform the request within the form submission handler and not delegate it to a saga

Correct, this is enough for handling file upload. Using redux-saga for this operation would be an over-kill. I believe that one should strive to pick the correct tool for a given task.

but then that makes me wonder, what is the point of redux-Saga?

Consider redux-saga as a "process manager" for making async operation as sync. Sometimes the flow of code is expected and there wont be any surprises. Although sometimes it doesn't so, since there is inversion of control caused by side effects (e.g API calls). Therefore, causing surprises and uncertainty about when we will get our response.

I don't see a way to keep my form apprised of the status of that request without storing it in Redux state somewhere

In this Demo I'm using redux-saga together with Formik in order to control 2 things:

1. API call for POSTing a file to an endpoint.
2. uploading flag for controlling the UI while the user is waiting for the file to be uploaded

redux handles only uploading, whereas the rest of the values are handled by formik and redux-saga that helps to provide a better user-experience (the user have an uploading indicator for what is happening in the UI) and developer-experience (we are controlling the flow of executionin the saga by yielding the response).