Redux state not updating after form submit

Question

I'm trying to make it so that the react form's input values are updating the redux store's state for userData. When I submit the form it just gives me the error "TypeError: dispatch is not a function". I'm new to redux so I'm sure that I'm missing something.

Oh and I'm using the duck file model so in addition to these files there is a master reducer file that imports this reducer into the store so I haven't forgotten that.

File Structure Pic

types.js

const REGISTER = 'REGISTER';

export default {
    REGISTER
}

actions.js

import types from './types.js';

const register = (userData) => {
    type: types.REGISTER
    payload: userData
};

export default {
    register
}

operations.js

import Creators from './actions';

const register = Creators.register;

export default {
  register
}

reducers.js

import types from './types';

const initialState = {
  isLoggedIn: false,
  userData: {}
}

const registrationReducer = (state = initialState, action) => {
  switch(action.type) {
    case types.REGISTER: {
      return {
        ...state,
        isLoggedIn: true,
        userData: action.payload
      }
    }
    default: return state;
  }
}

export default registrationReducer;

index.js

import registrationReducer from './reducers';
export { default as registrationOperations } from './operations';
export default registrationReducer;

The Registration Component Container

import { connect } from 'react-redux';
import Registration from './Registration';

import { registrationOperations } from './duck';

const mapDispatchToProps = (dispatch) => {

  const registerUser = () => {
      dispatch(registrationOperations.register())
    };

  return { registerUser };
};

const RegistrationContainer = connect(
  mapDispatchToProps
)(Registration);

export default RegistrationContainer;

Registration Component

import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';

class Register extends Component {
  constructor() {
    super();
    this.state = {
      nameVal: '',
      emailVal: '',
      passVal: '',
      pass2Val: ''
    };
  }


  handleSubmit = (e) => {
    e.preventDefault();
    console.log('Hey');

    this.props.registerUser();

  }


  render(props) {
  //  const { nameVal, emailVal, passVal, pass2Val }  =  this.state;

    return (<div className='user-form-wrapper'>

      <div className='register-form-container'>
        <h1 className='form-title'>Register</h1>
        <form onSubmit={this.handleSubmit} className='register-form'>
          <div className='register-form-column'>
            <label className='input-label' htmlFor='full-name'>Full Name</label>
            <input type='text' name='FullName' autoCorrect='off' autoCapitalize='off' spellCheck='false' value={this.state.nameVal} onChange={(e) => this.setState({ nameVal: e.target.value })}/><br/>

            <label className='input-label' htmlFor='E-mail'>E-mail</label>
            <input type='text' name='E-mail' autoCorrect='off' autoCapitalize='off' spellCheck='false' value={this.state.emailVal} onChange={(e) => this.setState({ emailVal: e.target.value })}/><br/>

            <label className='input-label' htmlFor='Password'>Password</label>
            <input type='password' name='Password' autoCorrect='off' autoCapitalize='off' spellCheck='false' value={this.state.passVal} onChange={(e) => this.setState({ passVal: e.target.value })}/><br/>

            <label className='input-label' htmlFor='RepeatPassword'>Repeat Password</label>
            <input type='password' name='password-repeat' autoCorrect='off' autoCapitalize='off' spellCheck='false' value={this.state.pass2Val} onChange={(e) => this.setState({ pass2Val: e.target.value })}/><br/>

            <label className='checkmark-container'>Sign me up for newsletter
              <input type='checkbox' name='newsletter'/>
              <span className='checkmark'></span>
            </label>

            <button type='submit' value='submit' className='form-submit'>

            </button>
          </div>

          <div className='register-form-column'>
            <h6>Or log in using any of the social networks</h6>
            <button className='socialBtn socialBtn--facebook'>
              Login with Facebook
            </button>

            <button className='socialBtn socialBtn--linkedIn'>
              Login with LinkedIn
            </button>
          </div>
        </form>

      </div>

    </div>);
  }

}

export default Register;

Tomasz Mularczyk Tomasz Mularczyk · Accepted Answer · 2018-03-27T06:53:22

mapDispatchToProps should be the second argument of connect function:

const mapDispatchToProps = (dispatch) => {

  const registerUser = () => {
      dispatch(registrationOperations.register())
    };

  return { registerUser };
};

const RegistrationContainer = connect(
  null,
  mapDispatchToProps
)(Registration);

export default RegistrationContainer;

As a tip: if arguments match you can just pass a configuration Object:

const mapDispatchToProps = {
  registerUser: registrationOperations.register,
};

EDIT

There's another bug in the code:

const register = (userData) => {
    type: types.REGISTER
    payload: userData
};

... think about it :)

You are not returning anything it's actually incorrect syntax (weird that your code editor didn't raise any warning). Fix it by returning an Object:

const register = (userData) => ({
    type: types.REGISTER
    payload: userData
});

Redux state not updating after form submit

1 Answers