reduxify-form
Improve redux-form api to give your connected form all of the state it needs! 🐧
why
the redux-form API has some quirks. your reduxForm(...)
'ed component isn't passed all of the form state you need.
For example:
- by default, you can't see all of your validation errors, or form values in the root component (see #2299)
- when you want to get extra props into your reduxForm'd component, you end up doing some double wrapping/connecting of your exports. it's a little wonky!
this package makes setting up your form easier to get all the rich form state you need!
usage
npm install --save reduxify-form
consider the example of how redux-form recommends getting extra state into your form.
// redux-form provided example, simplified/condensed // boring old importsimport React from 'react'import connect from 'react-redux'import Field reduxForm formValueSelector from 'redux-form' // boring old form componentlet { const firstName handleSubmit = props return <form => <Field ="firstName" ="input" ="text" ="First Name"/> <input = /> <Field ="lastName" ="input" ="text" ="Last Name"/> </form> } // connect redux-form to our component for the first time...MyForm = MyForm // connect our component again to get some additional stateMyForm = MyForm
ok, that's not too bad! unforunately, not all selectors work. see #2299. further, this could be a little bit friendlier! let's examine how reduxify-form
helps.
// reduxify-form example // one extra import!import React from 'react'import Field from 'redux-form'import connect from 'react-redux'import reduxifyForm from 'reduxify-form' // <== this guy :) let { // note where we get our additional state from now const formState: firstName handleSubmit = props return <form => <Field ="firstName" ="input" ="text" ="First Name"/> <input = /> <Field ="lastName" ="input" ="text" ="Last Name"/> </form> } // wait, and this is it?// yup! just one call to get all of that additional state (like field values, such as firstName) component: MyForm formName: 'myform' connect
api
reduxifyForm({ component: Component, formName, [connect], [getState] }) : Component
component: MyForm formName: 'myform'
by default, behaves similarly to reduxForm whilst applying additional form state to your props
.
addtional props
come through as props.formState
. what is exactly in formState
, you ask? content from redux-form state selectors.
// selectors are from http://redux-form.com/6.3.1/docs/api/ReduxForm.md/propsformState = values: state syncErrors: state submitErrors: state
want different content in formState
? no problem. pass a custom function via getState
.
component: MyForm formName: 'myform' { // return any selectors from redux form return dirty: state pristine: state invalid: state myFieldValue: state 'myField' fruit: 'bananas' }
init(connect) : undefined
rather than passing connect
on every form call, you can bind reduxify-form
to connect
just once, so it works with all of your forms.
import connect from 'react-redux'import reduxifyForm init from 'reduxify-form' // now you don't need to provided `connect` to any reduxifyForm calls component: MyForm formName: 'myform' connect