Newest version of redux-form makes tutorial impossible to continue. Advanced Redux - Clientside Auth Section 7, Lecture 94 at 10 minutes

For anyone stuck on Advanced Redux - Clientside Auth Section 7, Lecture 94 at 10 minutes, here's a fix that will let you move on.

Issue: There's no way to move forwards from this part of the Client Side Auth lecture as latest updates to reduxForm mean signinUser (and other variables) doesn't get passed to props. You'll probably also notice before then that email and password can't be console.logged from your handleFormSubmit function either.

Hitting the Sign Up button will throw Uncaught TypeError: this.props.signinUser is not a function(…)

Fix: A quick fix, though not ideal, is to open package.json and change the redux-form dependency to version 5.3.3. This will let you continue.

"redux-form": "5.3.3",

http://stackoverflow.com/questions/41138158/uncaught-typeerror-this-props-signinuser-is-not-a-function

@StephenGrider fyi

[crisryantan]

Thank you for this. I was wondering why I also could not console.log email and password. Hopefully the course would be updated using the latest redux-form library.

[paolavness]

Disappointing about this.... Would have been great to know about this earlier. Do you have a planned update? The course was helpful but alot of energy spent (wasted?) which could have been dedicated to learning the latest version, not an old version. Latest version is already 6.5.

[StephenGrider]

Hey guys - I was under the impression that I had mentioned a specific version of redux-form to use in the course. Is that not the case?

Instructions were to install through command line with npm install redux-form, which will give the latest version. Might be worth including it in package.json so when we're setting up boilerplate at the start, we don't bump into this.

…

On 22 Feb 2017 18:30, "Stephen Grider" ***@***.***> wrote: Hey guys - I was under the impression that I had mentioned a specific version of redux-form to use in the course. Is that not the case? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHL1q9BEmj8TWz-MU2pVtCa4wDDSlxVxks5rfH63gaJpZM4LqQO0> .

[paolavness]

Thank you for replying Stephen. For user's like myself, I'm not using the boilerplate but integrating directly into a project as I learn. It needs to be visible somewhere else - or ideally, updated :)
Warmly,
Paola

[hanorine]

If anyone is still interested in getting an upgrade to v6.5.0 i have managed to work it all out and you can check it out in my repo here.

If it helps you or if you like the successful implementation, give the repo a star.
cheers

[paolavness]

Awesome @JaysQubeXon, thank you!!

[muhammed-salman]

I have updated the code to used redux form v7 and issued the pull request for same. You can check out my repo for implementation https://github.com/muhammed-salman/react-auth-client

[SunnyJohal]

@StephenGrider you did not mention a specific version in your course. A note for people taking the course in future would probably be handy. Cheers

[Haack79]

you did mention it in a video about keeping to an older version but it's not specifically clear how to keep that older version when the newer version seems to be automatically loaded.

[padrisimo]

Guys you just have to swamp a few things to move on, its easy to find out reading the documentation of redux-form but basicly we implement connect from react-redux an then connect the signin component, u may use Field insted of input in the component and give it a name and finally pass values as param of ur actions in this way (for lesson 94 signin.js file ) :

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import * as actions from '../../actions';

class Signin extends Component {
    handleFormSubmit(values) {
        this.props.signinUser(values);
    }

    render() {
        const { handleSubmit } = this.props;

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

export default reduxForm({
    form: 'signin'
})(
    connect(null, actions )(Signin)
);

in ur actions (index.js) file we can select the email and password in this way:

import axios from 'axios';

const ROOT_URL = 'http://localhost:3090';

export function signinUser( values ) {
    const { email, password } = values;
    return function(dispatch) {
        axios.post(`${ROOT_URL}/signin`, {email, password})
    }
}

Everything must work in this way, I highly recomend to use redux-logger and implement it as middleware (in the same way we did in the course with redux-thunk) because is very important to know whats going on with ur state and what dispacth ur actions in development other wise is kind of blind.

[padrisimo]

by the way install an older version is as simply as npm uninstall redux-form and then npm i -S redux-form@numberofversionyouknowitworks but ...
My experience in life when I have to deal a legacy projects with backbone, marionnet, jquery, handlebars and all of this if the versions are not fixed in the package.json there is allways trouble so thats why is really important to fix versions of your dependemcies BUT anyway if you are working in really old projects you may change your node and npm version with a node versions manager and development mades you feel like an amish so my humble advise is much as you can TRY TO NOT USE OLDER VERSIONS, TRY TO UPDATE YOURSELF and ur development to the latest stable versions of what u use.

sorry 4 my english and greeting from Barcelona :)