React Redux connect is throwing a call signature error with TypeScript

Question

I am writing this component, however, I am receiving the following error while trying to use the higher order function connect from react-redux. I believe I have defined the types correctly. What I am doing wrong?

import React, {Component} from 'react';
import connect from 'react-redux'
import {ExperimentsState, Root} from "../../types/somepath.redux";
import {Dispatch} from "redux";
import experimentActions from "../../redux/actions/experimentActions";


type StateToProps = {
    experiments: ExperimentsState;
};

type DispatchToProps = {
    fetchExperiments(): () => void;
}

type SignalsHomePageContainerProps = StateToProps & DispatchToProps

class SignalsHomePageContainer extends Component<SignalsHomePageContainerProps, ExperimentsState> {
    render() {
        return (
            <div>
                Hi, I am container
            </div>
        );
    }
}

const mapStateToProps = (state: Root) => ({
    experiments: state.experiments.data
})

const mapDispatchToProps = (dispatch: Dispatch) => ({
    fetchExperiments: () => dispatch(experimentActions.fetchExperiments())
})

export default connect<StateToProps, DispatchToProps>(mapStateToProps, mapDispatchToProps)(SignalsHomePageContainer);

The error I am receiving pertaining to the connect function is as follows:

TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof import("somepath/node_modules/@types/react-redux/index")' has no compatible call signatures.

Answer 1

You're missing the brackets around connect in your imports, so connect is instead the entire module, instead of a function.

// Should be:
import { connect } from 'react-redux'

// Instead of:
import connect from 'react-redux'