Should we replace redux-form with react final form?

Looks like the author of redux-form recently added a warning against using it unless a very strong coupling is needed between the form and modifying the app state in other routes. I think that this isn’t our use case, and that redux-form was picked as it was the most mature react form implementation at the time of choosing.
If that is indeed the case, should we follow his recommendation and replace it with react final form?
If not, where do we use the more complex capabilities of redux-form?
(cc: @ui_ux)

I think you are correct, at the time of writing, it was indeed the common pattern, and there are a few candidates to replace it (where final form is one).
having said that, I do wonder how should we deal with technical debt in general, the old / current rails UI have a lot of imho more important issues to deal with, for example:

  • usage of out of date jquery package (with a few well known vulnerabilities).
  • jquery ui
  • flot for charting
  • gridster for dashboard
  • etc

I personally tried to move many of the packages first to NPM (generally following the trackers at Task #23451: move all javascript/css assets to webpack - Foreman and Task #16283: Move all vendored assets and asset gems to npm+webpack - Foreman).

but I do feel like I’m working alone on these efforts.

Lastly, if we do plan to write significant forms (host wizard?), then it might be a good idea to revisit it first… thanks!

My thought here was to avoid the technical debt here with using redux-form before more of our legacy forms are converted to it. I agree there is a lot of tech debt in lots of places, but if we agree that redux-form is too complex for what we need, let’s get off it before we start rewriting more pages to use it and then accumulate a bigger effort later when we decide to move off it.

1 Like

I agree now would be a good time to think about whether we want to move away from redux-form (we probably do) while the host wizard is still at the beginning. React final form looks ok and the author has experience with forms, any other suitable candidates?

1 Like

maybe https://jaredpalmer.com/formik/

1 Like

Formik vs Final-Form in npm trends, they both seem well updated
though Formik has a larger community, might be worthy to try play with it first ?

How difficult would it be to convert the existing code to each of them? What about features we would need to add, such as custom field types - which one would be easier? Is there some framework that patternfly-react is looking into implementing?

2 Likes

I replaced redux-form with formik in bookmarks form in an attempt to figure out whether it is a viable replacement.

Difficulty to switch - low, the changes are mostly limited to the bookmarks form itself. It should be possible to have additional abstraction with HOC, but I left things intentionally as a bare-bones example.

Custom components - about as difficult as with redux-form, all I needed to do was replace Field component from redux-form with the one from formik in our TextField component.

Extensible forms - we would need to add initial state for the additional fields to the Formik component, fields themselves can be added with slot-fill

Wizard forms - there is an official example how to do a wizard form, some people even roll out their own solutions based on formik (here and here). So it looks like wizards are possible, I haven’t tried to create one myself.

I also tried a more complex form with nested fields and resetting for foreman_templates.

Additional findings:

formik passes only onBlur and onChange handlers to the form field, while redux-form additionally has onDragStart, onDrop, onFocus

It is not possible to validate form on initial render. Though there are suggestions for workarounds, we will not see a proper solution any time soon.

Even though array fields are supported, the errors for array fields are missing.

The project is actively maintained. There are 201 opened issues and 61 opened PRs at the time of writing this post.

Overwhelming majority of code has been written by the author. There are others who participate in reviews, but the author seems to be the most active with others far behind him.

When a field gets focus for the first time and the value is changed, the errors are displayed only after the field loses focus. For dirty fields, the errors are displayed immediately. I am not sure if it is a bug or intentional:

errors

4 Likes

Does this help, hurt, or no impact on getting to patternfly 4?

This has no impact on patternfly.

Based on this (and more) discussions I don’t think we should use react-final-form for our forms.

The issue with react-final-form is that its is not a 100% react component, as it uses subscriptions and watchers which already causes issues for some developers, and might cause more issues as React will progress.

Some features compared to Formik:

Wizard forms

formik passes only onBlur and onChange handlers to the form field, while redux-form additionally has onDragStart, onDrop, onFocus

  • final form passes onFocus, onBlur and onChange handlers

Even though array fields are supported, the errors for array fields are missing.

  • available in final form
1 Like

Is this even needed since react-patternfly provides a wizard?

I opened a PR to add formik into foreman-js and remove the redux-form. As far as I know, no plugin is currently using redux-form, but let me know if anyone is using it.

I also rebased the PR in core.

2 Likes