Type error when calling mapped action - mapping actions to props react/redux

Question

I am trying to map an action to props however however I'm getting an error: TypeError: _this2.props.updateUsername is not a function

How does one successfully map redux actions to props and call the function successfully? I havnt seen this error pop up in any other stackoverflow question/answers is it a simple mistake? Could it be a wrong setup of redux in .index or .app?

I have tried: - importing without using default export - having different formats of mapDispatchToProps (eg without using bindactioncreators) - fixing typos

Component:

import { updateUsername } from "../../actions/user-actions";
import React, { Component } from "react";
import { InputText } from "primereact/inputtext";
import { Button } from "primereact/button";
import { Password } from "primereact/password";
import "./UserLogin.css";
import { connect } from "react-redux";
import { bindActionCreators } from 'redux'

export class UserLoginPage extends Component {
  constructor(props) {
    super(props);
    this.state = { //used to be using states so ill leave these here for now
      username: "", 
      password: "",
      renderTryAgain: false
    };

    this.checkLoginDetails.bind(this.checkLoginDetails);
  }

  async checkLoginDetails() {
    ...
  }

  render() {
    const usernameBox = (
      <InputText
        ...
        value={this.props.username}
        onChange={e => this.props.updateUsername(e.target.value)}
      />
    );

    const passwordBox = (
      <Password
        ...
      />
    );

    const loginButton = (
      <Button
        ...
      />
    );

    return (
      <header className="User-login">
        <p>Dashboard User Login</p>
        <div className="p-grid">
          <div className="p-col">{usernameBox}</div>
          <div className="p-col">{passwordBox}</div>
          <div className="p-col">{loginButton}</div>
        </div>
      </header>
    );
  }
}

const mapStateToProps = state => ({
  username: state.username
});

const mapDispatchToProps = dispatch => bindActionCreators(
  {
    updateUsername,
  },
  dispatch,
)

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

Reducers:

import { UPDATE_USERNAME} from '../actions/user-actions'

export function passReducer(state = "", {type, payload}) {
  switch (type) {
    case true:
      return payload
    default:
      return state
  }
}

export function usernameReducer(state = '', {type, payload}) {
  switch (type) {
    case UPDATE_USERNAME:
      return payload.username
    default:
      return state
  }
}

export default { passReducer, usernameReducer };

Action:

export const UPDATE_USERNAME = 'username:updateUsername'
export function updateUsername(newUsername){
    return {
        type: UPDATE_USERNAME,
        payload: {
            username: newUsername
        }
    }
}

export default {UPDATE_USERNAME, updateUsername}

Many Thanks

Your action name is updateUsername not onUpdateUsername check your typo. — Arvindh

Harish Harish · Accepted Answer · 2019-02-25T04:45:37

Can you check once after updating your constructor as below?

constructor(props) {
    super(props);
    //...
  }

Type error when calling mapped action - mapping actions to props react/redux

2 Answers