redux thunk

Hi, I am using expressjs/nodejs at the back end and react at the front end. Also, I am using the latest redux-form build. (I am very new to all this so forgive me as I am trying to pick up)

I have a signup form that I am submitting to the server with an action using axios and redux thunk. I am running into problem in the action creater at the arrow (line 2). When I try to submit it will not work.

export function signUpUser(values) {
	return function(dispatch) {          // <==========problem here
		axios.post(`${API_URL}/signup`, values)
		.then(response => {
			if(response.data.error) {
				throw new SubmissionError(response.data.error);
			}
			// update state to indicate user is authenticated
			dispatch({ type: AUTH_USER });

			// Save JWT token to localStorage
			localStorage.setItem('token', response.data.token);
		})
		.catch(error => {
			throw new SubmissionError(error.errors);
		});
	}
}

On the other hand, if I remove the second line like this and keep everything else inside, it works. But I will have to change the signature of the action creator like this:

export function signUpUser(values, dispatch, props) { <====== notice change here
	return axios.post(`${API_URL}/signup`, values)   <====== and here
		.then(response => {
:
:
:

Here is the code of my form and reduxForm:

class SignUp extends Component {
	render() {
		const { handleSubmit, valid, error, submitting, pristine } = this.props;
		return (
			<Form onSubmit={handleSubmit} method='post' className='mt-4'>
				<Field name="email" label="Email" type="text" placeholder="Enter your email" component={InputField}/>
				<Field name="password" label="Password" type="password" placeholder="Enter your password" component={InputField}/>
				<Field name="confirmpassword" label="Confirm Password" type="password" placeholder="Confirm your password" component={InputField}/>
				{error && <Alert color="danger">{error}</Alert>}
				<Button color="primary" disabled={!valid || pristine || submitting} block>Sign Up</Button>
			</Form>
		);
	};
}

export default reduxForm({
	form: 'signup',
	validate,
	onSubmit: signUpUser  <======== this is the action creator.
})(SignUp);

I also tried to pass the action creator to the form like this:

<SignUp onSubmit={signUpUser}/>

But still, it will not work unless I remove the return function(dispatch) from the action creator. Thanks for this great library. I truly appreciate all the time place in making it. best regards

[gustavohenke]

Actions (the returned value of your action creator) must be dispatched to the Redux store in order for them to be run. If you use connect from react-redux, then you’ll be able to use your thunk just fine:

export default connect( null, {
  onSubmit: signUpUser
})(reduxForm({
  form: "signup",
  validate
})( SignUp ));

Whatever you pass into onSubmit is not going to be dispatched - it’s simply executed by Redux Form. So there’s no problem if you adjust the signature of the action creator - except you’ll need to call it something else, because it’s no longer an action creator! 😆

[hostr]

@ablbol I’m looking for the same answer, were you able to find anything?