This package binds form submission into a Redux action and then waits for the submission resolution (success or error) using Redux Promise Listener package.
Final Form uses promises for submission. In case you use e.g. Redux Saga middleware for async / business logic you have no way to be informed about the form submission since Final Form doesn't use Redux.
First, you need to setup Redux Promise Listener and export its promiseListener
object.
Then you create Redux action creators that are dispatched when a form is submitted. The package exports convenient helpers createFormActions
for that. Action creator functions have toString
method that returns the action type (similar to Redux Toolkit API).
import { createFormActions } from 'react-final-form-redux-submit'
const formActions = createFormActions('MY_FORM');
First, you need to create a hook for form submission with a factory function. Then you use the hook in your form.
Tip: Create the
useSubmitForm
hook just once in a project and export it.
import { Form } from 'react-final-form'
import { createSubmitFormHook } from 'react-final-form-redux-submit'
import { promiseListener } from './store'
import { formActions } from './types'
const useSubmitForm = createSubmitFormHook(promiseListener)
const MyForm = () => {
const onSubmit = useFormSubmit(formActions);
return (
<Form name="myform" onSubmit={onSubmit}>
{(formProps) => <>...</>}
</Form>
);
};
Now when the form is submitted FORM_SUBMIT
action is dispatched with form values in payload
and Redux saga can react to it with e.g. takeEvery
effect. The form submit handler won't resolve until SUCCESS
or FAILURE
action is dispatched. Final form handles the form state like submitting
flag or errors
.
import * as formActions from '../actions';
function* handleFormSubmit(action: Action<FormValues>) {
try {
// Make API call or any other logic
yield call(apiRequest, config.api.login, action.payload);
yield put(formActions.submitSuccess());
} catch (error: Error) {
const errorMessage = constructMessage(error);
yield put(formActions.submitFailure(errorMessage));
}
}
export default function* form() {
yield takeEvery(formActions.submit.toString(), handleFormSubmit);
}
A factory function for creating the hook that accepts FormActionTypes
and returns onSubmit
handler that can be passed to Form
.
An utility for creating FormActions
.