Función connect de React + TypeScript + Redux no funciona

Soy algo nuevo usando Typescript en React. Intenté conectar mi Redux con mi componente contenedor, pero por alguna razón sigue dándome errores de tipo. He revisado muchas publicaciones en Stack Overflow pero aún no puedo entender qué está pasando.

Mi archivo de tipos de Redux:

export interface StoreState {
    languageName: string,
    enthusiasmLevel: number
}

Mi archivo de componente contenedor:

// React imports
import React from 'react';
import {Link } from 'react-router-dom';
import * as actions from '../../redux/actions/actions';
import { StoreState } from '../../redux/types/types';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';

interface NavbarComponentProps {
  name: string;
  enthusiasmLevel?: number;
  onIcrement?: () => void;
  onDecrement?: () => void;
}

interface DispatchFromProps {
  onDecrement: () => void,
  onIncrement: () => void
}
interface StateFromProps {
  name: string,
  enthusiasmLevel: number
}

type Props = StateFromProps & DispatchFromProps & NavbarComponentProps;

class NavbarContainer extends React.Component<Props, {}> {

  public static defaultProps = {
    enthusiamsLevel: 1
  }

  public render() {
    return (
      <div className='App'>
        navbar works.

        <Link to='/'>left nav</Link>

{/*         
       <p>Hello {name + getExclamationMarks(this.props.enthusiasmLevel)} </p> */}

      <button onClick={this.props.onDecrement}> - </button>
      <button onClick={this.props.onIcrement}> + </button>
      </div>

    );
  }
}

function mapStateToProps({ enthusiasmLevel, languageName}: StoreState) {
  return {
    enthusiasmLevel,
    name: languageName
  }
}

function mapDispatchToProps(dispatch: Dispatch<actions.EnthusiamsAction>) {
  return {
    onDecrement: () => dispatch(actions.decrementEnthusiasm()),
    onIncrement: () => dispatch(actions.incrementEnthusiasm())
  }
}

export default connect<StateFromProps, DispatchFromProps, NavbarComponentProps, StoreState>(mapStateToProps, mapDispatchToProps)(NavbarContainer);

Mi error:

Supongo que hay un problema al restablecer el languageName a name, sin embargo, incluso cambiar eso no ayudó.

Cualquier ayuda sería muy apreciada. ¡Salud!

Respuesta #1

La firma relevante es la siguiente

<TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = {}>(
    mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
    mapDispatchToProps: MapDispatchToPropsNonObject<TDispatchProps, TOwnProps>
)

Al omitir el último State, se establece por defecto en {}.

Deberías estar llamando a connect<StateFromProps, DispatchFromProps, NavbarContainerProps, StoreState>(...)(...). Piensa en connect<ReduxInjected, DispatchInjected, GivenByParentWhenUsingThisComponent, ReduxStoreType>.

Nota que cambié un poco la interfaz, tus Props deberían ser NavbarContainerProps y solo incluir las props que se pasan manualmente (no desde el store).

Luego me gusta escribir un alias de tipo type Props=StateFromProps & DispatchFromProps & NavbarContainerProps; que usas para definir el componente.

class NavbarContainer extends React.Component<Props, {}> {
    ...
}