TypeError: dispatch is not a function

Question

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);

Answer 1

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

Answer 2

如果您使用connect模式，您将能够通过以下this.props.dispatch获得调度： this.props.dispatch 。

Answer 3

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 component is connected), you have access to dispatch from this.props.dispatch .