React-Redux проблемы подключения в typescript

Я пытаюсь сделать компонент, который передается в react-redux

3 ответов


Я не уверен, почему типы не могут вывести тип только из презентационного компонента, но он будет работать, если ownProps набирается в connect ->

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

Он также может сделать вывод, если ownProps набирается в mapDispatchToProps ->

mapStateToProps(state, ownProps: 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))
        }
    }
...
}

но вы можете указать интерфейс реквизита контейнера, как сказано по радио - (а также интерфейсы 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>;

Включить конструктор внутри класса, как это:

constructor(props) {
  super(props)
}

без конструктора реквизит не загружается

вместо

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

добавил Я (очевидно mapStateToProps & mapDispatchToProps должны быть определены перед функцией connect)

@connect(mapStateToProps, mapDispatchToProps)

выше

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