React + typcript + Redux функция подключения не работает

Question

Я новичок в использовании Typescript в React. Я попытался соединить мой Redux с моим компонентом контейнера, но по какой-то причине он продолжает выдавать мне ошибки типа. Я прошел через много постов переполнения стека, но все еще не могу понять, что происходит.

Мой файл типа Redx:

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

Файл компонента моего контейнера:

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

Моя ошибка:

Я предполагаю, что есть проблема с сбросом languageName на name, однако даже изменение, которое не помогло.

Любая помощь будет высоко ценится. Ура!

Answer 1

Соответствующая подпись следующая

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

При пропуске последнего State по умолчанию используется {}.

Вы должны звонить connect<StateFromProps, DispatchFromProps, NavbarContainerProps, StoreState>(...)(...). Подумайте connect<ReduxInjected, DispatchInjected, GivenByParentWhenUsingThisComponent, ReduxStoreType>.

Обратите внимание, что я немного изменил интерфейс, ваш Props должен быть NavbarContainerProps и включать только реквизиты, которые передаются вручную (не из магазина).

Затем я хотел бы написать псевдоним типа type Props = StateFromProps & DispatchFromProps & NavbarContainerProps;, который вы используете для определения компонента.

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