How I Fixed: Redux Form onSubmit Proxy Object

It’s late, I’m tired, but no excuses, this took me about 45 minutes to figure out even with the documentation.

The problem:

I wanted to use Redux Form (v6.0.5) to handle form submissions for a simple login form.

I could get the form to render, and submit, but when I submitted my data, rather than getting back the JSON data as expected, instead I got a funky proxy object:

Proxy {dispatchConfig: Object, _targetInst: ReactDOMComponent, _dispatchInstances: ReactDOMComponent, nativeEvent: Event, type: "submit"…}

Annoyingly now I cannot reproduce the issue that made the Proxy object appear in the first place, but here is sample working code that fixed the issue:

import React, { Component } from 'react';
import LoginForm from '../components/LoginForm';

export default class LoginPage extends Component {

  doLogin(formData) {
    console.log('Submitted form data', formData);
  }

  render() {
    return (
      <div>
        <LoginForm onSubmit={this.doLogin}/>
      </div>
    );
  }
}

And the login form itself:

import React  from 'react';
import { Field, reduxForm } from 'redux-form';

const LoginForm = (props) => {

  const { handleSubmit } = props;

  return (
      <form onSubmit={handleSubmit}>

        <label htmlFor="username">Username</label>
        <Field component="input"
               type="text"
               name="username" />

        <label htmlFor="inputPassword">Password</label>
        <Field component="input"
               type="password"
               name="password" />

        <button type="submit">Sign in</button>

      </form>
  );
};

LoginForm.propTypes = {
  onSubmit: React.PropTypes.func.isRequired
};

// Decorate the form component
export default reduxForm({
  form: 'login' // a unique name for this form
})(LoginForm);

There is a section on this in the documentation, but for the life of me, I couldn’t get my head around it.

All I know is, it seemed to like it more when I switched my LoginForm from a class to a function. But as I say, when I tried to revert my changes back to write up this blog post, it worked as a class all the same.

Hopefully this saves someone some time in the future.

Published by

Code Review

CodeReviewVideos is a video training site helping software developers learn Symfony faster and easier.

5 thoughts on “How I Fixed: Redux Form onSubmit Proxy Object”

    1. Ahh that’s cool, happy I could help 🙂 In truth I’m still not sure I fully understand how the Redux form submission process is handled. I was looking at it again yesterday and came to the conclusion that what I thought I knew was happening, was not quite what was / is happening. More study required on my part 🙂

  1. since you’re passing it in as onSubmit, you don’t need to pass it on to handleSubmit, as it will us that prop automatically.

    1. Cheers Kelly – I know it’s not correct currently. I have the project open currently, and will update this page once I’ve had another attempt at sorting that onSubmit part. I had so much trouble getting it to work last time – lack of understanding on my part, for sure.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.