typescript中的 React-Redux 连接问题

IT技术 reactjs typescript redux
2021-05-17 15:39:53

我正在尝试制作一个传递给 react-reduxconnect函数的组件。该组件如下：

interface ITestProps {
  id: number
}

class TestComponent extends React.Component<ITestProps, {}> {
  render() {
    return (<div>
      {this.props.name}
    </div>)
  }
}

mapStateToProps(state) {}
mapDispatchToProps(dispatch) {}

let ConnectedComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(TestComponent)

上面的代码似乎可以找到我是否ConnectedComponent像这样渲染

<ConnectedComponent></ConnectedComponent>

即没有idprops。它不应该抛出错误，因为ConnectedComponent只是 的连接形式TestComponent并且TestComponent应该具有形式的propsITestProps。这是它应该如何表现还是我做错了什么。

3个回答

我不确定为什么打字不能单独从表现组件推断类型，但如果在 connect -> 中输入 ownProps 它将起作用

let ConnectedComponent = connect<{}, {}, ITestProps>(
  mapStateToProps,
  mapDispatchToProps
)(TestComponent)

如果在 mapDispatchToProps -> 中输入 ownProps，它也可以推断出它

mapStateToProps(state, ownProps: ITestProps) {}

在类中包含一个构造函数，如下所示：

constructor(props) {
  super(props)
}

没有构造函数，props不会被加载

代替 

let ConnectedComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(TestComponent)

我添加了（显然mapStateToProps&mapDispatchToProps必须在连接函数之前定义）

@connect(mapStateToProps, mapDispatchToProps)

多于 

class TestComponent extends React.Component<ITestProps, {}> {

这是正确的行为。connect() 将返回一个新的容器组件，它将您的 TestComponent 包装为一个子组件。

这是源代码的一部分

class Connect extends Component {
...
    render() {
        const selector = this.selector
        selector.shouldComponentUpdate = false

        if (selector.error) {
          throw selector.error
        } else {
          return createElement(WrappedComponent, 
              this.addExtraProps(selector.props))
        }
    }
...
}

但是你可以像 Radio- 所说的那样指定容器的 props 的接口（还有 StateProps 和 DispatchProps 的接口）。从类型定义中可以看到，接受TStateProps、TDispatchProps和TOwnProps，并且会返回ComponentDecorator

export declare function connect<TStateProps, TDispatchProps, TOwnProps>(
    mapStateToProps?: MapStateToProps<TStateProps, TOwnProps> | MapStateToPropsFactory<TStateProps, TOwnProps>,
    mapDispatchToProps?: MapDispatchToProps<TDispatchProps, TOwnProps> | MapDispatchToPropsFactory<TDispatchProps, TOwnProps>,
    mergeProps?: MergeProps<TStateProps, TDispatchProps, TOwnProps>,
    options?: Options
): ComponentDecorator<TStateProps & TDispatchProps, TOwnProps>;
其它你可能感兴趣的问题
上一篇长丝未挤出 下一篇如何判断我的硼硅玻璃是不是假的？