Feature request: easier ways to get state of the enclosing form on context

[jedwards1211]

I often want to make generic components that I can plunk into any form to show stuff like the form's submission status and error. For instance:

<SubmitStatus
  submitting={submitting}
  submittingText={submittingText}
  submitSucceeded={submitSucceeded}
  submitSucceededText={submitSucceededText}
  submitFailed={submitFailed}
  error={error}
/>

But this is a PITA to use because I have to either

• Pass in the submitting, submitSucceeded, submitFailed, and error injected into each one of my forms (who's got time for that?)
• do reduxForm({form: 'ugh'})(SubmitStatus) (still too much work. I'm lazy and make no apologies for it!)

redux-form puts everything I need to know on context and in redux state, so I accept nothing less than a component that magically fetches those props with no extra effort on my part:

<SubmitStatus
  submittingText={submittingText}
  submitSucceededText={submitSucceededText}
/>

I wrote some elegant utilities to de-suck this situation. Perhaps you may be interested in some or all of their functionality in a PR. Here is what the resulting code looks like:

// @flow

import * as React from 'react'
import {connect} from 'react-redux'
import {isSubmitting, hasSubmitSucceeded, hasSubmitFailed, getFormError} from 'redux-form'
import createFormSelector from './createFormSelector'
import FormContext from './FormContext'
import SubmitStatus from './SubmitStatus'
import type {Props} from './SubmitStatus'

class SubmitStatusContainer extends React.Component<Props> {
  ConnectedSubmitStatus = connect(createFormSelector({
    submitting: isSubmitting,
    submitSucceeded: hasSubmitSucceeded,
    submitFailed: hasSubmitFailed,
    error: getFormError,
  }))(SubmitStatus)

  render(): ?React.Node {
    const {ConnectedSubmitStatus} = this
    return (
      <FormContext>
        {({form}) => <ConnectedSubmitStatus {...this.props} form={form} />}
      </FormContext>
    )
  }
}

Here is the FormContext render props component:

// @flow

import * as React from 'react'
import PropTypes from 'prop-types'
import type {ReactContext, Context} from 'redux-form/lib/types'

export type Props = {
  +children: (_reduxForm: Context) => React.Node,
}

const FormContext = ({children}: Props, {_reduxForm}: ReactContext): React.Node => children(_reduxForm)
FormContext.contextTypes = {
  _reduxForm: PropTypes.object.isRequired,
}

export default FormContext

And here is the magic createFormSelector function:

// @flow

import mapValues from 'lodash.mapvalues'
import {formValueSelector} from 'redux-form'
import {createSelector, createStructuredSelector} from 'reselect'

/**
 * This may look silly but it makes selecting parts of redux-form state not suck.
 *
 * Example:
 *
 * import createFormSelector, {value} from './createFormSelector'
 * import {isSubmitting, hasSubmitSucceeded, hasSubmitFailed, getFormError} from 'redux-form'
 *
 * const selectStatus = createFormSelector({
 *   submitting: isSubmitting,
 *   submitSucceeded: hasSubmitSucceeded,
 *   submitFailed: hasSubmitFailed,
 *   error: getFormError,
 *   foo: value('foo'),
 *   bar: value('bar'),
 * })
 *
 * selectStatus(state, {form: 'myForm'})
 */
export default function createFormSelector<S, IP: Object, OP: Object>(
  selectors: $ObjMap<OP, <V>(V) => ((form: string) => (state: S) => V)>,
  options: {
    +selectForm?: ?(state: S, props: IP) => string,
  } = {}
): (state: S, props: IP) => OP {
  const selectForm = options.selectForm || ((state: S, {form}: any) => form)
  const selectSelector = createSelector(
    selectForm,
    (form: string) => createStructuredSelector(mapValues(selectors, selector => selector(form)))
  )
  return (state: S, props: IP) => selectSelector(state, props)(state)
}

export function value<S>(field: string): (form: string) => (state: S) => any {
  return (form: string) => {
    const selector = formValueSelector(form)
    return (state: S) => selector(state, field)
  }
}

[danielrob]

That great type of developer laziness that leads us to spend hours and great effort to perfect our code ⭐️✅.

My tendency would be to start with implementing #3246, and then users can pair that with the various already available selectors.

Then implementing your (effectively) createFormNameBindingStructuredSelector function could be a user-land option if needed. Unconvinced it'd be suitable as a part of redux-form itself... not sure that it's a common enough case.

[jedwards1211]

does #3246 really need to be a HOC? Could just be a render props component.

[danielrob]

Good point, following the recent trend on that one seems beneficial - a render props component would be great. Would you be willing to raise a PR for that? I'm also increasingly convinced on second read that your createStructuredFormSelector / createFormSelector is pretty awesome. @erikras @gustavohenke, thoughts?

[jedwards1211]

Yeah, I'll make a PR for the render props comp!

[jedwards1211]

I made the PR!
As far as my createStructuredFormSelector thing, since it depends on reselect and redux-form doesn't, I should just release it in a separate package.

[danielrob]

@jedwards1211 thanks again for this, very awesome. With #4038 merged, I'll go ahead and close this ;).

[erikras]

Fix released in v7.4.0.

[lock]

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.