Feature Proposal: formValues() HOC decorator that works inside a form component

[erikras]

From discussion on #2852 with @wmertens. The problem being solved is that formValueSelector() cannot be used in a reusable way inside a <FormSection> because it doesn't know what the prefix defined in the <FormSection> is. General API syntax would look like:

@formValues({
  destProp: 'nameOfField'
})
class MyReusableFields extends Component {
  render() {
    const { destProp } = this.props
    // destProp is the value of the field called 'nameOfField'
    return (
      <div>
        <Field name="nameOfField" component="input"/>
        ... other fields

        ... some logic involving value of nameOfField:
        {destProp === 'specialValue' && <div>Value is SPECIAL!!</div>}
      </div>
    )
  }
}

There might also be an alternative syntax where, if your keys and values were all going to be the same, rather than pass...

@formValues({
  firstField: 'firstField',    // key and value are ===
  secondField: 'secondField'   // key and value are ===
})
class MyReusableFields extends Component {
  ...
}

...you could just pass a list of strings. e.g.

@formValues('firstField', 'secondField')
class MyReusableFields extends Component {
  ...
}

[wmertens]

Alright, I took a stab at implementing it. It's using @connect to listen to store updates, but it uses the getValues() from context._reduxForm to get at the values. See #3011

[erikras]

Merged #3011. Will comment again when released.

[erikras]

Fix published in v6.8.0.

[jasan-s]

I am sure I'm using the feature incorrectly. Instead of reading from Redux directly I thought I could use Values = formValues('email','password')(Auth) the Auth is the form name and the Field names are email and password.

[jasan-s]

I wanted to access forms values within the component. I know I can pass it down by using connect but though this may be cleaner.

[wmertens]

No, what you did there is create a component named Values that gives `email` and `password` as props to the Auth component

…

On Thu, 15 Jun 2017, 11:44 AM jasan-s, ***@***.***> wrote: I wanted to access forms values within the component. I know I can pass it down by using connect but though this may be cleaner. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2996 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADWll-Z-lcZ6_wD7pBs5JFmd_ydBoA7ks5sEPzzgaJpZM4Nr-dH> .

[jasan-s]

@wmertens so, what is the recommended way to accesses the form field values within the same form component? should i add something to the main export

export default reduxForm({
  form: 'Auth',
  destroyOnUnmount: false,
  validate,
})(Auth)

[wmertens]

Exactly this. Use <Value/> instead of <Auth/> and you will have the current field values as props.

…

On Thu, Jun 15, 2017 at 12:16 PM jasan-s ***@***.***> wrote: @wmertens <https://github.com/wmertens> so, what is the recommended way to accesses the form field values within the same form component? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2996 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADWlhD4ZQE00m48zzfDqBiEx9nBbr0Kks5sEQRqgaJpZM4Nr-dH> .

[wmertens]

Note that @formValues simply creates the @connect function that you need to get the values On Thu, Jun 15, 2017 at 12:17 PM Wout Mertens <wout.mertens@gmail.com> wrote:

…

Exactly this. Use <Value/> instead of <Auth/> and you will have the current field values as props. On Thu, Jun 15, 2017 at 12:16 PM jasan-s ***@***.***> wrote: > @wmertens <https://github.com/wmertens> so, what is the recommended way > to accesses the form field values within the same form component? > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#2996 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AADWlhD4ZQE00m48zzfDqBiEx9nBbr0Kks5sEQRqgaJpZM4Nr-dH> > . >

[gleb-lobastov]

@erikras I face some strange behaviour with formValues: values lagging behind the state at the time of reading. getValues retun { flag: false } when it actually true in the state. They syncs only on next mapStateToProps calculation, which might be performed only at next user interaction.

So formValuesSelector works for me, but formValues does not =(

[wmertens]

@gleb-lobastov can you share the code where you are using it? The @formValues just creates a redux listener with connect, so it should be updating when the store is updating, like all other connected components. Try looking at the redux and react devtools to see what the redux state is and what the react components get for props?

[gleb-lobastov]

@wmertens finally I reproduce the issue:
https://codesandbox.io/s/Vrn7MZov

And root of problem was in my react-redux version: 4.4.5
if you change react-redux to latest 5^ then problem will gone

[wmertens]

@gleb-lobastov wow, that's surprising! Good that you were able to fix it!

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