React-final-form: Plans for an accompanying library to extend state-management with Redux?

[leggomuhgreggo]

Feature Inquiry
I know one of the goals with this library is to avoid a heavy package size, in favor of modularity, a choice about which I salute you. With respect to that modular ethos, I was wondering if there was any intentions of make an accompanying library to aid in a boilerplated Redux integration, along the same lines of the redux-form predecessor.

It's true forms are often cited as being a part of the UX for which Redux has diminishing returns ("every keystroke?!" etc) and I respect that point of view; but, as someone who errs towards redux state purity, I was curious if there was any action in that direction.

Many thanks for your continued OSS contributions! Especially appreciating this library 🥇

[erikras]

Seems like it would be pretty easy to write a reducer and use FormSpy to dispatch the form state to be saved in Redux on every change. I guess the primary benefit would be to have access to it from outside the form.

But to answer your plans, no, there are no plans to do so.

[leggomuhgreggo]

Cool, thanks for the response

[erikras]

Here's a sandbox:

[leggomuhgreggo]

Holy cow! Man @erikras you knock my dang socks off.

This is awesome. Thanks!

[erikras]

To minimize the barrage of dispatched actions, I'd recommend using the subscription prop on FormSpy to only put the part of form state that you care about into Redux, not _all_ of it as in the example.

[leggomuhgreggo]

Makes sense -- looking forward to playing with it! Thanks again, man!

[oliviertassinari]

Seems like it would be pretty easy to write a reducer and use FormSpy to dispatch the form state to be saved in Redux on every change. I guess the primary benefit would be to have access to it from outside the form.

@erikras This sounds great. I will do that for debug purposes in development (redux devtools)!
🤔 It could also be useful in production to send the form state when an error occurs to services like Sentry.io.

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { FormSpy } from 'react-final-form'

function ConnectRedux(props) {
  const { dispatch, children } = props

  return (
    <React.Fragment>
      <FormSpy subscription={{ values: true }}>
        {({ values }) => {
          dispatch({
            type: 'REACT_FINAL_FORM',
            payload: values,
          })
          return null
        }}
      </FormSpy>
      {children}
    </React.Fragment>
  )
}

ConnectRedux.propTypes = {
  children: PropTypes.node,
  dispatch: PropTypes.func.isRequired,
}

exprot default connect()(ConnectRedux)

[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.