After spending countless hours trying to unravel why TypeScript is not cooperating with my connect() call, I'm at a loss. The error message is quite cryptic, as many TypeScript warnings tend to be, and the Redux definitions file only adds to the complexity of the situation. Take a look at my .tsx file:
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[];
}
/**
* Display and manage added Todos
* @param props
*/
function Todos(props: ITodosProps): JSX.Element {
const { saveTodo, deleteTodo, todos } = props;
/**
* Handles Todo removal
* @param id
*/
const onRemove = (id: string) => {
deleteTodo(id);
};
/**
* Handles adding new Todo
* @param text
*/
const onAdd = (text: string) => {
const todo = { id: uuid(), text };
// Save the new Todo 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;
`;
The problem lies in the connect() call according to TypeScript, here's the specific error message:
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.
Any thoughts on how to resolve this issue?