javascript - 如何在流程中输入 react-redux connect？

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,
    }
}

这是我对连接的用法。

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

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

[flow] Cannot call connect because property currentProduct is missing in React.StatelessFunctionalComponent [1] in the indexer property's key of type argument ST. (References: [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是一份更详细的指南，其中包含更多用例。