整合React，Redux，Redux-Form和React-Saga的最佳方法？

Question

I have read everything I can find on how to use react-saga and redux-form together I'm stuck at a crossroads and need some advice.

Here is how I ended up here.

I chose to work with Redux because it makes sense for my app and I don't have any problems there.

Switch from Thunk to Sagas

I started working on my async api calls to populate my app with data. I'm using a lot of data grids and I'm not sure where I'll end up on latency as some of the queries are quite complex.

When I started working on the action creators and methods for doing background polling of data I realized that Sagas were going to be much easier than Thunk.

I made that switch and I'm happy with it. Handling any errors from the api calls is being handled by an action creator that updates redux state container for all of my api calls. Errors are displayed by populating a modal based on those state changes.

Introduciton of Redux-Form

Once I started working on posting form data back to the api things got interesting and I realized I was about to write a lot of code to handle it all through Redux. Redux-form simplified things as it has a state container for everything form related and makes it really easy to setup and validate forms on the client side.

Redux-form handles all of the form state in my configuration until the form is submitted.

I'm using a container component conected to a Redux store I created to hold state of api requests.

The form is a child component of the container that is connected to Redux through redux-form which handles all of it's state.

When the form is submitted I am calling a Redux action which in turn called a saga to post the data.

The result of the saga api call is to either dispatch a success or failure action in Redux. I am passing an object to the api state that contains the status (success/failure), an error object with any errors, and a return object where I can return things like the id's of records just created.

That works well when the error from the api is communication related. Because I'm updating the api state my higher level app components have access to it so I can do things like trigger a modal for errors not specifically related to the form data itself.

But when I started thinking of how I would handle any field errors that could occur if the client side validation was missing some logic I got lost.

In my current setup those errors would be on the api state object. I could put them into a modal but there would be no client side error handling on the form itself.

Redux-form can handle server side validation tied directly back to the form fields but only from a promise and from what I can tell trying to return a promise through action creators would be difficult if not impossible.

I can write a promise in my onSubmit function but I would have to call my saga function directly instead of triggering it through an action. Is that an acceptable pattern?

I guess I could trigger an action from the saga to populate my api state values but it seems backwards.

Basically I would prefer to handle comm errors one way (through my api state container) and form field data errors another way (back throu redux-form and it's error handlers) and I'm not sure which direction to take.

I looked at a module redux-form-saga which makes it possible to return a promise directly back to the form and therefore use the redux-form error handling after the api call but I'm not sure if I would be able to also trigger my api state actions at the same time.

Rather than continuing going down the rabbit hole and maybe over complicating things I thought I would solicit some advice from anyone who has had to deal with something similar.

I'm good with async background calls to populate my data grids but when I have to post data back to the api I want to make sure the user can't take any other actions until they get a response back.

This is the first section of many in this app so I want to create a design pattern that makes sense, is easily reproducible, is reliable, and easy to follow.

Any suggestions?

Answer 1

React-Boilerplate will help you integrate React, redux, redux-saga. On top of that integrating redux-form should be straightforward. React-Boilerplate uses all the current best practices of the community for a production ready app