React-final-form: How to connect to redux

[hassanzadeh]

Hello moderators,
I have a question regarding your final-form lib.
In the docs you mention: "If you need to mutate your data via dispatching Redux actions, you should probably use Redux Form."

Does that mean I cannot use the data that I get from redux states in the forms? If yes, is it not an big limitation?
For example, my forms will get data from graphql (apollo) and based on the data I want to update my forms, how can I do that if I can't use redux?

THanks

[erikras]

The form data is set/initialized by passing in the initialValues prop. There's no reason why you could not connect() to get some Redux data and pass it into your React Final Form component as initialValues. Does that make sense?

[mnbbrown]

@erikras that works for values but what about things like errors? From the docs there doesn't seem to be a way to set errors outside of onSubmit or validate.

or am I mistaken?

[mnbbrown]

Great library btw - I much prefer the API and philosophy over redux-form.

[erikras]

You want to set submit errors?

[rogerwalt]

Very similar issue: Assume we need to change values of some fields (fetch some additional data that could also be provided manually) using a rest service (e.g. using redux-saga). The values are updated in Redux; but that will not change the field values in the final-form fields. Is this correct?

[erikras]

The values are updated in Redux; but that will not change the field values in the final-form fields. Is this correct?

To update the values in the final-form fields, you will need to update the value of the initialValues prop to the form. That could be done via Redux's connect(), it seems.

[jfreixa]

I have a similar problem with the redux and redux-saga. When I am submitting the form I dispatch an action and then I receive the errors via props (connect). It will be great if the Form has a prop of the submit errors. I don't want to make workaround passing callback into redux to make possible to put the errors inside the form.

[rogerwalt]

@jfreixa :+1: either something like you described; or there should be another clean (= no hack involved) solution to have a similar effect.

Side note: I looked into redux-form, but it does not integrate very easily with material-ui-next (yet). There is a library to address this problem (redux-form-material-ui), but it lags behind (material-ui version v1.0.0-beta.16, while current is v1.0.0-beta.38, and also it include no types). So it is no option for me to use redux-form at the moment.

[erikras]

I'm working on a way to get errors into RFF via a dispatched Redux action. Might not appear until next week sometime, though, due to the 🐰 holiday.

[ms88privat]

@erikras

To update the values in the final-form fields, you will need to update the value of the initialValues prop to the form. That could be done via Redux's connect(), it seems.

I didn't test it yet, but what happens to other, unrelated dirty fields then? Will they be overwritten with the "new" initialValues?

[erikras]

Here you go: React Redux Promise Listener converts actions into a Promise for libraries like this one.

[Jesus-Gonzalez]

Using initialValues is not really a solution.

The form will be reinitialized, fields will be not touched anymore and the form state will be pristine.

I've tried using keepDirtyOnReinitialize but it only works in the case of calling FormApi.initialize manually.

Do you know of any solutions for this?

Couldn't a form mutator, merge a certain redux form state with the final-form state? I'm about to go this way, or even coding a solution to keep dirty state when initial values are changed.

Let me know what you think.

Jesús

[erikras]

@Jesus-Gonzalez It certainly seems like you could wire up some sort of mutator/connect() solution, yes. But if you really need such tight coupling with Redux, I'd recommend looking at Redux-Form.

[aldis-ameriks]

I'm storing the form submit state (in progress, failed, success) in redux state and then passing it down in props to the final form, for the sake of showing a spinner or an error message for the appropriate state.
I ran into an issue with initial form values, if I pass the initial values using initialValues, then the form reinitializes the values, when e.g. clicking submit and form submit is in progress. However, that's not the behavior I'm looking for, I'd like to preserve the form values, if the form is dirty.
I'd imagine it's a common pattern, what would be a suggested solution in this type of scenario using final form? Is it somehow possible to move the state outside of final form inside the wrapper component and then set the initial values in the constructor?

Not sure if this is the right place to ask this, or should I create a separate issue about this particular case.

[Jesus-Gonzalez]

@aldis it should be a separate issue.

I guess the form submit state should not be part of the final form state.

[aldis-ameriks]

I realized there's a shallow compare with the initialValues, so in my case, the initialValues always remains the same. But because It's a composite input field, the value is actually an object containing two nested values. initialValues = {startEndDate: {startDate: xxx, endDate: xxx}}.

I'm creating a new reference during each re-render by rebuilding the initialValues. By ensuring that the reference remains the same between re-renders, i can avoid the form reinitialization whenever the props change.

The quickest solution that I came up with is, having initialValues in state and initialize them in the constructor in the form wrapper component.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.