redux-form-submit

Adds a submit action creator to redux-form

Usage no npm install needed!

<script type="module">
  import reduxFormSubmit from 'https://cdn.skypack.dev/redux-form-submit';
</script>

README

redux-form-submit

NPM version Build Status Coveralls Status Dependency Status

Adds an async submit action creator to redux-form v6.

The Problem

redux-form, before v6.2.0, doesn't provide a way to submit a form by dispatching an action. This module works like a plugin that exports a submit action creator to do that with a few limitations.

If you are using redux-form@6.2.0 or higher, you probably don't need this, you can just use the built in submit action creator. But, there're cases when that isn't enough. An example is when you want to enable form submission on the server.

Install

npm install --save redux-form-submit

Usage

First, as this is asynchronous, you need to apply the redux-thunk middleware to the store. Then, for every form you want to submit with redux-form-submit you need to expose the config object passed to redux-form. For example:

MyForm.js

import React from 'react'
import { reduxForm, Field } from 'redux-form'

const MyForm = () => {
  return (
    <form>
      <Field name="input1" component="input" />
      <Field name="input2" component="input" />
    </form>
  )
}

const onSubmit = (values) => {
  if (values.input1 !== 'right value') {
    throw { input1: 'Please, provide a right value' }
  }
}

// Exports the redux-form config
export const config = {
  form: 'myForm',
  onSubmit
}

export default reduxForm(config)(MyForm)

elsewhere.js

import submit from "redux-form-submit"
import { config } from './MyForm'

dispatch(submit(config))
// or send initial values
dispatch(submit(config, { input1: 'wrong value' }))

Limitations

As this has nothing to do with the form component, it:

  • can't call custom submit methods other than onSubmit;
  • can't pass props to onSubmit, asyncValidate etc.

License

MIT © Diego Haz