Question

这就是我的mapStateToProps的样子。

const mapStateToProps = (state): StateProps => {
    let status = false;
    if (state.productsPage.currentProduct) {
        if (state.productsPage.currentProduct.status === "ACTIVE") {
            status = true;
        }
    }
    return {
        showModal: state.productsPage.showModal,
        currentProduct: state.productsPage.currentProduct,
        isLoading: state.status.loading.PRODUCTS_EDIT,
        initialValues: {
            name: state.productsPage.currentProduct ? state.productsPage.currentProduct.name : "",
            status,
        },
    };
};

这里是StateProps

的形状

type StateProps = {
    showModal: boolean,
    currentProduct: Object,
    isLoading: boolean,
    initialValues: {
        name: string,
        status: boolean,
    }
}

这是我对connect的用法。

const connected = connect<React$StatelessFunctionalComponent<any>, StateProps>(mapStateToProps, mapDispatchToProps);

这会产生以下错误，我不知道这意味着什么或如何解决它。

[流程]无法调用connect，因为属性currentProduct是在索引器的React.StatelessFunctionalComponent [1]中丢失类型参数ST的属性的键。（参考：[1]）

Answer 1

建议您将Flow至少升级到0.89以上，并使用Flow Typed's newest React Redux library definition。

然后，您可以使用Props和OwnProps注释连接的组件

import * as React from 'react'

type OwnProps = {|
  passthrough: string,
  forMapStateToProps: string
|}

type Props = {|
  ...OwnProps,
  fromMapStateToProps: string,
  dispatch1: () => void
|}

const MyComponent = (props: Props) => (
  <div onClick={props.dispatch1}>
    {props.passthrough}
    {props.fromMapStateToProps}
  </div>
)

export default connect<Props, OwnProps, _, _, _, _>(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent)

Here是更详细的指南，其中包含更多用例。

Answer 2

React$StatelessFunctionalComponent是一个通用的类型，需要prop类型。您可能希望该功能希望收到的道具不是<any>，最重要的是，它希望收到StateProps返回的mapStateToProps的道具（尽管可能还会期望其他道具）

它可能会根据react-redux的版本而改变，但是我看到一些文档表明connect的泛型是mapStateToProps的返回值，而不是React元素。 -Source

您可能需要connect<StateProps, DispatchPropsIfAny>而不是提供Element类型。

如何在流中键入react-redux connect？

2 个答案: