React Redux TS: TypeScript жалуется на вызов connect () - PullRequest
0 голосов
/ 15 октября 2018

Я потратил часы, пытаясь выяснить, почему TypeScript не нравится мой вызов connect (), и я не могу этого сделать, потому что сообщение об ошибке немного загадочно (как и многие предупреждения TypeScript) и файл определений Reduxэто тоже довольно сложно.Вот мой файл .tsx:

import { addTodo, removeTodo } from "@test-shared/redux";
import { IAppState, ITodoItem } from "@test-shared/types";
import React from "react";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import styled from "styled-components/native";
import uuid from "uuid/v4";
import TodoAdder from "./TodoAdder";
import TodoList from "./TodoList";

interface ITodosProps {
  saveTodo: (todo: ITodoItem) => void;
  deleteTodo: (id: string) => void;
  todos: ITodoItem[];
}

/**
 * List and add new Todos
 * @param props
 */
function Todos(props: ITodosProps): JSX.Element {
  const { saveTodo, deleteTodo, todos } = props;

  /**
   * On Todo remove handler
   * @param id
   */
  const onRemove = (id: string) => {
    deleteTodo(id);
  };

  /**
   * On Todo add handler
   * @param text
   */
  const onAdd = (text: string) => {
    const todo = { id: uuid(), text };

    // Save to state
    saveTodo(todo);
  };

  return (
    <TodosView>
      <TodosItems>
        <TodoList todos={todos} onRemove={onRemove} />
      </TodosItems>
      <TodoAdderWrapper>
        <TodoAdder onAdd={onAdd} />
      </TodoAdderWrapper>
    </TodosView>
  );
}

const ConnectedTodos = connect(
  (state: IAppState) => ({
    todos: state.items
  }),
  (dispatch: Dispatch) => ({
    deleteTodo: (id: string) => {
      dispatch(removeTodo(id));
    },
    saveTodo: (todo: ITodoItem) => {
      dispatch(addTodo(todo));
    }
  })
)(Todos);

export default ConnectedTodos;

const TodosView = styled.View`
  flex: 1 0 auto;
  padding: 10px;
`;

const TodoAdderWrapper = styled.View`
  flex-grow: 0;
`;

const TodosItems = styled.View`
  flex-grow: 1;
`;

TypeScript жалуется на вызов connect (), вот ошибка:

Argument of type '(props: ITodosProps) => Element' is not assignable to parameter of type 'ComponentType<never>'.
  Type '(props: ITodosProps) => Element' is not assignable to type 'StatelessComponent<never>'.
    Type 'Element' is not assignable to type 'ReactElement<any>'.
      Types of property 'type' are incompatible.

Есть идеи?

1 Ответ

0 голосов
/ 02 декабря 2018

Я бы попробовал

const Todos: React.SFC<ITodosProps> = (props) => {
// your code here
}

Трудно без полного кода, хотя.

...