Flow: Flow not exporting Props through Redux connect over multiple files

[dainyl]

The following set up reports no errors even though the props are invalid

Child.js

// @flow

import React, { Component } from 'react'
import { connect } from 'react-redux'

type Props = {
    foo: number,
}

class Child extends Component<void, Props, void> {
    render() {
        return <div />
    }
}

const mapStateToProps = (state, ownProps: Props) => ({})

export default connect(mapStateToProps)(Child)

Parent.js

// @flow

import React from 'react'
import Child from './Child'

const child = <Child foo="hello" /> // no flow error

[dainyl]

It should be noted that the following works fine

Child2.js

// @flow

import React, { Component } from 'react'
import { connect } from 'react-redux'

type Props = {
    foo: number,
}

class Child extends Component<void, Props, void> {
    render() {
        return <div />
    }
}

const mapStateToProps = (state, ownProps: Props) => ({})

const ConnectChild = connect(mapStateToProps)(Child)
const connectChild = <ConnectChild foo="hello" /> // flow error: props of React element `ConnectChild`. This type is incompatible with the expected param type of 'object type'

[nmn]

Please read through the types for react-redux and figure out how to type connected components properly. I'm working on improving the types to decrease the amount of manual typing you need to do.

[dainyl]

My mistake, after taking a look at the types it seems that the following works fine. Thanks for your time.

Child.js

// @flow

import React, { Component } from 'react'
import { connect } from 'react-redux'
import type { Connector } from 'react-redux'

type Props = {
    foo: number,
}

class Child extends Component<void, Props, void> {
    render() {
        return <div />
    }
}

const connector: Connector<Props, any> = connect((state, ownProps: Props) => ({}))
export default connector(Child)

Parent.js

// @flow

import React from 'react'
import Child from './Child'

const child = <Child foo="hello" /> // flow error: props of React element `Child`. This type is incompatible with 'object type'

[sibelius]

can we use Connector directly on export default?

[nwshane]

I'm having this same problem, and tried using Connector, but flow errors are still not showing up when I pass incorrect props in from the Parent component. I also can't find any documentation for Connector type. Can someone point me to the documentation?

@dainyl @nmn

[nwshane]

Ah, I might be having problems because I'm using flow 0.53.0, and there are no flow-typed definitions for that version yet.

[willbrazil]

Unfortunately the solutions above didn't work for me :(

What ended up working was to instead of passing the Child constant, pass a functional component like this:

connect(mapStateToProps)((props : Props) => <Component {...props}>)

Then you'll face another flow bug which is that spreading the properties doesn't work. The solution I found isn't elegant but it's the best I could come up with:

connect(mapStateToProps)(({prop1, prop2} : Props) => <Component prop1={prop1} prop2={prop2}>)

I hope this helps some of us!

[daliusd]

Non obvious solution to this problem that requires no additional typing / change to the code is:

npx flow-typed install react-redux