Search code examples
javascriptreactjsreact-redux-form

What's the difference between actions.submit and actions.submitFields?


What's the difference between actions.submit() and actions.submitFields in react-redux-forms? The documentation isn't very clear on this matter unfortunately.

I've tested the two functions - my form is called 'feature' and has only firstName and lastName input boxes.

This is what I've done:

1) actions.submit('feature.firstName', somePromise)

Appears to not do anything apart from dispatching a rrf/addIntent action that looks like this:

type(pin): "rrf/addIntent" model(pin): "feature.lastName" type(pin): "submit"

2) actions.submit('feature')

This actually submits the form which has the exact same behavior of my button

<button type="submit">
    submit me!
</button>

3) actions.submitFields('feature.firstName', somePromise)

same as 1)

4) actions.submitFields('feature')

same as 2)

As far as I can tell, actions.submit and actions.submitFields are exactly the same.

And actions.submit is provided so you can dispatch that action so you can submit the form without clicking a button to submit.

Any I missing anything?

Thanks!


Solution

  • Appears from the ts docs that the fields one deals with validation/errors on a field by field basis whereas the regular submit does validation/error addition on the entire form as a whole:

    /**
     * Waits for a submission promise to be completed, then, if successful:
     * * Sets .submitted property of form for model to true
     * * Sets .validity property of form for model to the response (or true if the response is undefined).
     *
     * If the promise fails, the action will:
     * * set .submitFailed property of form for model to true
     * * set .errors property of form for model to the response
     *
     * @param model The top-level model form key of the data to submit.
     * @param promise The promise that the submit action will wait to be resolved or rejected
     */
    submit: (model: string | ModelGetterFn, promise?: Promise<any> | undefined, options?: any) => ActionThunk;
    
    /**
     * Waits for a submission promise to be completed, then, if successful:
     * * Sets .submitted property of form for model to true
     * * Each key in the response, which represents a sub-model (e.g., "name" for users.name) will have its .validity set to its value.
     *
     * If the promise fails, the action will:
     *
     * * set .submitFailed property of form for model to true
     * * Each key in the response, which represents a sub-model (e.g., "name" for users.name) will have its .errors set to its value. (See example)
     *
     * @param model (String | Function): the model to be submitted
     * @param promise (Promise): the promise that the submit action will wait to be resolved or rejected
     */
    submitFields: (model: string | ModelGetterFn, promise: Promise<any>) => ActionThunk;
    

    https://github.com/davidkpiano/react-redux-form/blob/684f75342a43a3e8bd46b07d1baf8248ae23db98/react-redux-form.d.ts#L949