react-redux mapStateToProps problem

Hi,

don’t know if this is the right place to ask, but I’ll try anyway. Is it wrong for me to expect that flow would not report a problem in the code below? It complains on the line accessing this.props.b about ‘b’ property not being found. I would expect that because of the mapStateToProps flow would know that the b property from the state is accessible in the props. Or am I doing something wrong?

Regards, Herman

// @flow
import React, {PropTypes} from 'react'; // eslint-disable-line no-unused-vars
import {connect} from 'react-redux';

type TMyState = {
  b: number
}

type Props = {
  a: number;
}

class TestCase extends React.Component<void, Props, void> {
  render(){
    let ret = this.props.b;
    return(
      <div>{ret}</div>
    );
  }
}

function mapStateToProps(state: TMyState) {
  return {
    b: state.b
  }
}

export default connect(mapStateToProps)(TestCase);

[charlesoconor]

That’s too bad there is too so much boilerplate. It would be really nice if it could infer the prototypes that come out of connect. All of those types already exists in StoreState so it shouldn’t be too bad.

I’m stuck behind flow v0.41 mostly because of this issue.

[0x24a537r9]

Our team (at Oculus, so Facebook) uses Flow and Redux, although Flow is not yet rich enough to support your use case automatically. That said, the workaround that we use is incredibly easy and very typesafe. A simplified example from our codebase for how we handle it:

import React from 'react';
import {connect} from 'react-redux';

import type {State as DeeplinkingState} from 'HomeDeeplinkingReducer';
import type {
  ReduxProps,  // Our type alias for dispatch() and other props attached by connect()
  State as StoreState,
} from 'HomePrimeStore';

type ReduxMappedProps = {
  deeplinking: DeeplinkingState,
};
type OwnProps = {
  error: ?Error,
};
type Props = ReduxMappedProps & ReduxProps & OwnProps;

const HomeDeeplinkCompletionMarker = (props: Props) => {
  ...
};

function mapStateToProps(
  state: StoreState,
  ownProps: OwnProps,
): ReduxMappedProps {
  return {
    deeplinking: state.deeplinking,
  };
}

export default connect(mapStateToProps)(HomeDeeplinkCompletionMarker);

Hope that helps!