Не может справиться с машинописью с реакции и редукцией - PullRequest
Новая
       8

Не может справиться с машинописью с реакции и редукцией

0 голосов
/ 30 сентября 2018

Я новичок в машинописи и действительно изо всех сил.Я не могу понять, где начать и где закончить.Да, в интернете есть много ресурсов, но мне не удалось получить эту информацию и использовать в моем проекте.Надеюсь встретить некоторую помощь здесь.Я также провел некоторую проверку типов, и если вы найдете что-то, что я мог бы сделать лучше, просто скажите мне, чтобы улучшить его.Так что теперь я борюсь с редуксом mapStateToProps и mapDispatchToProps.Я перепробовал много вариантов, но каждый раз у меня появляются какие-то ошибки.Я опубликую свой код, который представляет мой компонент панели мониторинга, который связан с состоянием.

import * as React from 'react';
import { connect } from 'react-redux';
import SearchIcon from '../SvgIcons';
import MapComponent from '../Map';
import { getEventInfo, getUserInfo } from '../../actions';

interface StateProps {
  userReducer: {
    accessToken: string
  },
  eventReducer: {
    events: object[]
  }
}

interface DispatchProps {
  dispatchUserInfo: () => void;
  dispatchEventInfo: (accessToken: string, query: string) => void;
}

interface OwnProps {
  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void,
  accessToken: string,
  events: object[]
}

type Props = StateProps & DispatchProps & OwnProps;

class DashboardPage extends React.Component<Props, {}> {              
  componentDidMount() {
    const { dispatchUserInfo } = this.props;
    dispatchUserInfo();
  }

  handleEventSearch = e => {
    e.preventDefault();
    const { dispatchEventInfo, accessToken } = this.props;
    const query: string = e.target.children[0].value;
    dispatchEventInfo(accessToken, query);
  }

  render() { 
    const { events } = this.props; 
    return (
      <div className="dashboard-container">
        <div className="search-event">
          <form className="search-event__form" onSubmit={this.handleEventSearch}>
            <input
              autoComplete="off"
              type="text"
              name="search-event"
              placeholder="Search an event"
              className="search-event__input"
              aria-label="Enter search text"
            />
            <button type="submit" className="search-event__button">
              <SearchIcon />
              Search
            </button>
          </form>
          <p className="sign-out">
            <a href="/api/logout" className="btn btn--sign-out sign-out__button">Sign out</a>
          </p>
        </div>
        <div className="google-map">
          <MapComponent events={events} />
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state: StateProps) => {
  const accessToken = state.userReducer.accessToken || '';
  const events = state.eventReducer || [];
  return {
    accessToken,
    events
  };
};

const mapDispatchToProps = (dispatch: DispatchProps) => ({
  dispatchEventInfo(query: string, token: string) {
    dispatch(getEventInfo(query, token));
  },
  dispatchUserInfo() {
    dispatch(getUserInfo());
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(DashboardPage);

Это ошибки машинописи 1) Refers to handleEventSearch`method

[ts] Параметр 'e' неявно имеет тип 'any'.

2) ссылается на mapDispatchToProps

[ts] Невозможно вызвать выражение, тип которого не имеет подписи вызова.Тип «DispatchProps» не имеет совместимых подписей вызовов.

3) относится к mapDispatchToProps в connect HOC

Аргумент типа '(отправка: DispatchProps) =>{dispatchEventInfo (query: string, token: string): void;dispatchUserInfo (): void;} 'нельзя назначить параметру типа' MapDispatchToPropsParam <{dispatchEventInfo (запрос: строка, токен: строка): void;dispatchUserInfo (): void;}, {}> '.

Type' (dispatch: DispatchProps) => {dispatchEventInfo (запрос: строка, токен: строка): void;dispatchUserInfo (): void;} 'нельзя назначить типу' MapDispatchToPropsFunction <{dispatchEventInfo (query: string, token: string): void;dispatchUserInfo (): void;}, {}> '.

Типы параметров dispatch и dispatch несовместимы.Тип «Dispatch>» нельзя назначить типу «DispatchProps».Свойство dispatchUserInfo отсутствует в типе «Dispatch>».

Также, если вы можете предоставить мне очень хорошие источники, чтобы узнать о реакции и избыточности с помощью машинописного текста, чтобы я мог легко написать свой код.

1 Ответ

0 голосов
/ 30 сентября 2018

  1. Вам необходимо явно указать тип события: any или React.SyntheticEvent<...something>

  2. Параметр отправки должен иметь тип Dispatch из Redux

Также небольшой совет, вы можете определить свои реквизиты как:
ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & OwnProps
и удалить ненужные интерфейсы

...