I'm getting this error, 'TypeError: dispatch is not a function' what am I doing wrong? I have read the documentation for redux but I can not see that I'm doing something wrong? (Beginner at redux) The fault is in the inputIsValid method

import React from 'react';
import { connect } from 'react-redux';
import { validatedAuthInput } from '../actions/index';

class AuthInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = { inputValue: '' };
    }

    inputIsValid({ dispatch }, value) {
         dispatch(validatedAuthInput(this.props.type, value));

         this.validInput(this.props.type, value);
         return value.includes('@') && value.length > 4 ? 'success' : 'warning';
    }

    handleinput = event => {
        this.setState({ inputValue: event.target.value });
    };

    render() {
        return (
            <FormGroup
                label={this.props.label}
                validationState={this.inputIsValid(this.state.inputValue)}>
                <ControlLabel>{this.props.label}</ControlLabel>
                <FormControl
                    type={this.props.type}
                    value={this.state.value}
                    placeholder={this.props.placeholder}
                    onChange={this.handleinput}
                />
                <FormControl.Feedback />
            </FormGroup>
        );
    }
}

export default connect(null)(AuthInput);

I'm getting this error, 'TypeError: dispatch is not a function' what am I doing wrong? I have read the documentation for redux but I can not see that I'm doing something wrong? (Beginner at redux) The fault is in the inputIsValid method

import React from 'react';
import { connect } from 'react-redux';
import { validatedAuthInput } from '../actions/index';

class AuthInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = { inputValue: '' };
    }

    inputIsValid({ dispatch }, value) {
         dispatch(validatedAuthInput(this.props.type, value));

         this.validInput(this.props.type, value);
         return value.includes('@') && value.length > 4 ? 'success' : 'warning';
    }

    handleinput = event => {
        this.setState({ inputValue: event.target.value });
    };

    render() {
        return (
            <FormGroup
                label={this.props.label}
                validationState={this.inputIsValid(this.state.inputValue)}>
                <ControlLabel>{this.props.label}</ControlLabel>
                <FormControl
                    type={this.props.type}
                    value={this.state.value}
                    placeholder={this.props.placeholder}
                    onChange={this.handleinput}
                />
                <FormControl.Feedback />
            </FormGroup>
        );
    }
}

export default connect(null)(AuthInput);

• javascript
• reactjs
• redux

3 Answers 3

Props is not automatically passed into that function so you need to do this.props inside the function instead. I will remend you separate your actions from your ponent and pass a mapDispatchToProps object to connect as described here

If you're using the connect pattern, you'll be able to get at dispatch via: this.props.dispatch.

Your inputIsValid function is trying to "destructure" the first argument and grab the dispatch property from there. This is wrong because then you're calling this.inputIsValid with just this.state.inputValue as an argument. But in any case you shouldn't be trying to receive dispatch as an argument in your function. Since this is an instance function (and you're ponent is connected), you have access to dispatch from this.props.dispatch.