Issue with calling action when migrating from Redux Form v5.3.3 to v6.1.1

[Andriy-Kulak]

Hi Everyone,
I can't seem to figure out why my action is not being called when I migrated my version 5 redux form to v6. Currently, action is being called but nothing is being returned and no dispatch is sent to reducer at the moment. I am using redux thunk as a reducer, but my action never gets dispatched to the reducer when I make the switch. V5 version redux-form works perfectly. Below is my action/action creator, V5 and v6 form components.

I am pointing out in line 8 of the action where the function stops returning results.

using version 6.1.1 and migrating from 5.3.3.
I need to migrate because of the improvement in deep forms in version 6 has drastically improved my other parts of the app but I can't get this seemingly simple Sign In component to work...
Thanks!

ACTION

import axios from 'axios';
import {browserHistory} from 'react-router';
import {AUTH_USER, UNAUTH_USER, AUTH_ERROR, ROOT_AUTH_URL} from '../constants/auth.constants';

export function signinUser({email, password}) {
  console.log('email and password in action', email, password); 
---- The console above returns the correct message in the browser. ----
**---- NOTHING IS RENDERED below this in redux form v6. V5 WORKS perfect.**-----------------
  return dispatch => {
    console.log('pass the return'); ------> does not work :-(
        // Submit email/password to the server
    axios.post(`${ROOT_AUTH_URL}signin`, {email, password})
    .then(response => {
      console.log('response', response);
      // - Update state to indicate user is authenticated: flag will turn to "true"
      dispatch({type: AUTH_USER});
      // - Save the JWT token in local storage
      localStorage.setItem('token', response.data.token);

      // - redirect to the route '/feature'
      browserHistory.push('/');
    })
    .catch(() => {
                    // if request is bad...
                    // - Show an error to the user
      dispatch(authError('Bad Login Info!'));
    });
  }
}
**---- ABOVE is NOT RENDERED in v6.. while in v5 works perfect **-----------------

VERSION 6.1.1 REDUX FORM COMPONENT

import React, {Component, PropTypes} from 'react';
import {reduxForm, Field} from 'redux-form';
import {signinUser} from '../../actions/auth.actions';

class Signin extends Component {
    // used to take supplied inputs and check auth
  handleFormSubmit({email, password}) {
        // Need something to log user in
    console.log('test', email, password);
    signinUser({email, password});
  }

  renderAlert() {
    if (this.props.errorMessage) {
      return (
        <div className="alert alert-danger">
          <strong>Oops!</strong> {this.props.errorMessage}
        </div>
        );
    }
  }

  render() {
    // handleSubmit is a built in redux-form helper to bind ui to values
    const {handleSubmit} = this.props;

    return (
      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
        <fieldset className="form-group">
          <label>Email:</label>
          <Field name="email" component="input" type="text" required className="form-control"/>
        </fieldset>
        <fieldset className="form-group">
          <label>Password:</label>
          <Field name="password" component="input" type="password" required className="form-control"/>
        </fieldset>
        {this.renderAlert()}
        <button action="submit" className="btn btn-primary">Sign in</button>
      </form>
    );
  }
}

Signin.propTypes = {
  signinUser: PropTypes.func,
  errorMessage: PropTypes.string,
  handleSubmit: PropTypes.func
};

function mapStateToProps(state) {
  return {errorMessage: state.auth.error};
}

export default reduxForm({
  form: 'signin'
}, mapStateToProps, signinUser)(Signin);

VERSION 5.3.3 REDUX FORM COMPONENT

import React, {Component, PropTypes} from 'react';
import {reduxForm} from 'redux-form';
import * as actions from '../../actions/auth.actions';
class Signin extends Component {
    // used to take supplied inputs and check auth
  handleFormSubmit({email, password}) {
        // Need something to log user in
    this.props.signinUser({email, password});
  }

  renderAlert() {
    if (this.props.errorMessage) {
      return (
        <div className="alert alert-danger">
          <strong>Oops!</strong> {this.props.errorMessage}
        </div>
        );
    }
  }

  render() {
    // handleSubmit is a built in redux-form helper to bind ui to values
    const {handleSubmit, fields: {email, password}} = this.props;

    return (
      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
        <fieldset className="form-group">
          <label>Email:</label>
          <input {...email} type="text" required className="form-control"/>
        </fieldset>
        <fieldset className="form-group">
          <label>Password:</label>
          <input {...password} type="password" required className="form-control"/>
        </fieldset>
        {this.renderAlert()}
        <button action="submit" className="btn btn-primary">Sign in</button>
      </form>
    );
  }
}

Signin.propTypes = {
  signinUser: PropTypes.func,
  errorMessage: PropTypes.string,
  handleSubmit: PropTypes.func,
  fields: PropTypes.object
};

function mapStateToProps(state) {
  return {errorMessage: state.auth.error};
}

export default reduxForm({
  form: 'signin',
  fields: ['email', 'password']
}, mapStateToProps, actions)(Signin);

[iyn]

I didn't analyze all of the code, but the first thing I see that can be problematic is in the component and reduxForm call:

export default reduxForm({
  form: 'signin'
}, mapStateToProps, signinUser)(Signin);

As you can see in the docs (http://redux-form.com/6.1.1/docs/api/ReduxForm.md/), as of now, reduxForm only takes configuration object. If you want to use redux's mapStateToProps and mapDispatchToProps, you need to use connect (as with other connected redux components/containers). You can do something like this:

// (other imports)
import { connect } from 'react-redux';

// (your component code)

const SigninForm = reduxForm({
    // (your redux-form config)
});

const mapStateToProps = (state) => {
    return {
        // (data you want to get from your store)
    };
};

// simple version of mapDispatchToProps - more advanced usage in the docs:
// https://github.com/reactjs/react-redux/blob/master/docs/api.md
const mapDispatchToProps = {
    signinUser,
};

export default connect(mapStateToProps, mapDispatchToProps)(SigninForm);

And then you can dispatch signinUser action using this.props.signinUser(youData) (remember to bind the method that uses this.props or use arrow functions with static class properties).

Let me know if that helps.

[viiiprock]

@iyn I use your approach on redux-form 6.7 version and react-boilerplate, I got an error
Uncaught TypeError: Cannot read property 'props' of undefined
Seems it's come from react-boilerplate or "redux-form/immutable", because I tried on create-react-app and works well.
Do you have any solution?

[danielrob]

Closing with bulk close of v5 issues. If this issue still requires action and/or also affects v6/7, please request a reopen with details or raise a new issue. v5 PR's are still welcomed.

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