时间戳

首页 > 解决方案 > 如何输入 react-redux connect in flow？

javascript - 如何输入 react-redux connect in flow？

问题描述

这就是我的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);

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

[流程] 无法调用connect，因为索引器属性的参数类型键中的 [1] 中currentProduct缺少属性。（参考文献：[1]）React.StatelessFunctionalComponentST

标签： javascriptreactjsreact-reduxflowtype

解决方案

建议您将 Flow 至少升级到 0.89 以上，并使用Flow Typed 最新的 React Redux 库定义。

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)

这是一个更详细的指南，其中包括更多用例。

推荐阅读