how to type react-redux connect in flow?

Question

This is what my mapStateToProps looks like.

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

Here is the shape of StateProps

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

This is my usage of connect.

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

This produces the following error, and I have no idea what it means or how to go about solving it.

[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])

flow.org/en/docs/react/redux

gerrytan
– gerrytan

2022-03-14 05:08:10 +00:00
Commented Mar 14, 2022 at 5:08 — gerrytan
– gerrytan, Commented Mar 14, 2022 at 5:08

wgao19 · Accepted Answer · 2019-06-24 04:39:58Z

3

It is recommended that you upgrade Flow to at least past 0.89, and use Flow Typed's newest React Redux library definition.

Then, you can annotate the connected components with Props and 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 is a more detailed guide that includes a couple more use cases.

answered Jun 24, 2019 at 4:39

wgao19

5235 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Charles Stover · Accepted Answer · 2018-11-20 16:39:52Z

0

React$StatelessFunctionalComponent is a generic that expects prop types. Instead of <any>, you would want the props that that function expects to receive -- most importantly, it expects to receive your StateProps returned by mapStateToProps (though it may expect others in addition).

It may change depending on version of react-redux, but I am seeing some documentation that suggests that the generics for connect are the return value of mapStateToProps, not a React element. - Source

You may be needing connect<StateProps, DispatchPropsIfAny> instead of providing an Element type.

answered Nov 20, 2018 at 16:39

Charles Stover

1,1466 silver badges13 bronze badges

1 Comment

Chaim Friedman Over a year ago

not sure about the any vs prop types, you may be right about that will try soon, but the first argument in connect generics has to have a callable signature, at least in the version of react-redux flow typed I am using.

Collectives™ on Stack Overflow

how to type react-redux connect in flow?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related