Question

我是Redux的新手，也是Novelcript的新手。

我找到了一个相当不错的基本简化版本，我在the react-redux docs尝试做的事情。

代码是这样的：

import * as actionCreators from '../actions/index'
import { bindActionCreators } from 'redux'
import React, { Component } from 'react'
import { connect } from 'react-redux'

class TodoApp extends Component {
    render() {
        return (<div>test!</div>)
    }
}
function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) }
}


export default connect(mapStateToProps, mapDispatchToProps)(TodoApp)

我的代码编辑器（带有TSLint扩展名的VS代码）和tsc都将最终(TodoApp)突出显示为错误，这是我得到的消息：

src / components / test.tsx（20,61）：错误TS2345：类型＆＃39; typeof的参数   TodoApp＆＃39;不能分配给＆＃39; ComponentType＆lt; {类型的参数   待办事项：任何; }＆amp; {actions：typeof＆＃34;（filepath）...＆＃39;。输入＆＃39; typeof   TodoApp＆＃39;不能分配类型＆＃39; StatelessComponent＆lt; {todos：any; }   ＆安培; {actions：typeof＆＃34;（filepath）...＆＃39;。       输入＆＃39;类型的TodoApp＆＃39;不提供签名匹配＆＃39;（props：{todos：any;}＆amp; {actions：typeof＆＃34;（filepath）/ actions / index＆＃34 ;;}＆amp; {   孩子？：ReactNode; }，context？：any）：ReactElement |空＆＃39;

20 export default connect（mapStateToProps，   mapDispatchToProps）（TodoApp）

我的问题是，我并不完全明白mapStateToProps和connect正在做什么，但在获得理解之前， 我想知道是否有代码更改，我可以在这里修改这个打字稿＆＃34;错误＆＃34;。

Answer 1

您的反应组件没有道具，因此您的connect有错误，因为它推断mapStateToProps和mapDispatchToProps都应返回空对象

你可以通过为反应道具添加类型defs来解决这个问题，但是隐式any也有很多不安全的使用。如果您出于安全考虑完全输入此应用程序，它将看起来像这样......

interface ITodo {
  description: string
}

interface ITodosState {
  todos: ITodo[]
}

interface ITodoProps {
  todos: ITodo[]
}

interface ITodoActionProps {
  someAction: () => void
}

class TodoApp extends React.Component<ITodoProps & ITodoActionProps> {
    render() {
        return (<div>test!</div>)
    }
}

function mapStateToProps(state: ITodosState): ITodoProps {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch: Dispatch<ITodosState>): ITodoActionProps {
  return bindActionCreators({ someAction: actionCreators.someAction }, dispatch)
}

export default connect<ITodoProps, ITodoActionProps, {}>(mapStateToProps, mapDispatchToProps)(TodoApp)

Answer 2

您尚未输入TodoApp的道具。

type Props = {
    todos: any[] // What ever the type of state.todos is
    actions: {
       addTodo: Dispatch<any>
    }
}

class TodoApp extends React.Component<Props> {
    render() {
        return <div>test!</div>
  }
}

打字稿React / Redux：类型＆＃39;类型的MyClass＆＃39;不能分配给＆＃39; ComponentType＆lt; ...＆＃39;

2 个答案: