Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there any instruction to migrate from redux-form to react-final-form?

I working on a project that need to upgrade redux-form to react-final-form. I just wonder that is there any documentation for that task.

like image 281

1 Answers

EDIT: ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰ There is now a Migration Guide!! ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰


I meant to make a migration guide, but it's just so easy that I never found the motivation to do it. But I'll write a little here for all of the people who find this excellent SEO-bait via Google.


Rather than "decorate" your form component with a HOC, you use ๐Ÿ React Final Form's <Form> component inside your form component to give you all of your form state via a render prop. Most of the config stuff from Redux Form maps directly onto props to <Form>, e.g. initialValues, onSubmit, etc.

The <Field> API is nearly identical, but with the added benefit that you can define how your field is rendered inline via a render prop (using a "fat arrow" function as your component prop in Redux Form was forbidden and a common pitfall). ๐Ÿ React Final Form has a few extra bits of field state, like dirtySinceLastSubmit, which can come in handy.

By default, Redux Form would not rerender your entire form on every value change, forcing you to use a getFormValues() selector if you needed them in realtime. React Final Form does rerender on every value change by default because for most small forms, this is just fine. But ๐Ÿ React Final Form allows fine tuning of rerendering via providing a subscription prop to <Form>, specifying exactly which pieces (slices) of form state you want to rerender for. Then, any time you were using a selector in Redux Form, you would use a <FormSpy> component in ๐Ÿ React Final Form, which allows you to subscribe ("select") parts of the form state to rerender for.

As linked in the other answer, this talk explains the difference pretty well. More talks will be given later in 2019.

like image 146
Erik R. Avatar answered May 16 '23 09:05

Erik R.