How to use redux-form with reselect

Question

I want to use the reselect with redux-form to get the value from redux. the problem is I don't know how to combine the getFormValues with reselect. it seems that I cannot access the state in the createSelector. so that I cannot come up a way to use the redux-form's selector in the reselect.

For example:

// How to access the state here?
const getFoo = createSelector(
  [getBar],
  (bar) => {
    // return something
  }
)

The selector in redux works like this:

getFormValues('formName')(state);

Solidary

Answer 1

You likely want to use reselect with redux-form's selectors (which are how you get current data out of redux-form).

You can learn more about selectors here....

https://redux-form.com/7.3.0/docs/api/formvalueselector.md/

with an example here...

https://redux-form.com/7.3.0/examples/selectingformvalues/

You would then use a Reselect selector with a Redux-form selector sort of like this...

const selector = formValueSelector('myForm');
const mapStateToProps = createStructuredSelector({
  firstValue: (state) => selector(state, 'firstValue')
});

Here is another example of one being used from a different Github related subject https://github.com/erikras/redux-form/issues/1505

const formSelector = formValueSelector('myForm')
const myFieldTitle = (state) => formSelector(state, 'title')
const doSomethingWithTitleSelector = createSelector(myFieldTitle, (title) => {
    return doSomethingWithTitle(title)
})

function doSomethingWithTitle() { ... }

const Form = reduxForm({
    form: 'myForm',
})(TheComponent)

export default connect(
    state => ({
        titleWithSomethingDone: doSomethingWithTitleSelector(state)
    })
)(Form)

Styracaceous

Answer 2

You can make use of getFormValues like so:

import { createSelector } from 'reselect';
import { getFormValues } from 'redux-form';

const selectFormValues = () => createSelector(
  (state) => state,
  (state) => getFormValues('formName')(state)
);

Cholecystitis

Answer 3

Until recently, it really sucked trying to get select state in a form-independent way. I rectified this situation by PRing a <FormName> component that allows you to get the name of the enclosing form element, and created a library redux-form-reselect for adapting the redux-form selectors. For example:

// @flow

import * as React from 'react'
import {connect} from 'react-redux'
import {
  isSubmitting,
  hasSubmitSucceeded,
  hasSubmitFailed,
  getFormError,
  FormName,
} from 'redux-form'
import {createStructuredFormSelector} from 'redux-form-reselect'
import SubmitStatus from './SubmitStatus'

type Props = {
  submitting: boolean,
  submitSucceeded: boolean,
  submitFailed: boolean,
  error: ?Error,
}

export default class SubmitStatusContainer extends React.Component<Props> {
  ConnectedSubmitStatus = connect(createStructuredFormSelector({
    // createStructuredFormSelector converts all of these selectors
    // to use the form name passed as the `form` prop to
    // ConnectedSubmitStatus.
    submitting: isSubmitting,
    submitSucceeded: hasSubmitSucceeded,
    submitFailed: hasSubmitFailed,
    error: getFormError,
  }))(SubmitStatus)

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

Windowlight