Redux connected components about babel-plugin-flow-react-proptypes HOT 5 CLOSED

You have to write it like this:

class MyComponent extends React.Component {
  props: Props;
}
export default connect()(MyComponent);

I'd accept a PR adding decorator support. I might implement it eventually but it's not a priority, especially considering it's disabled in babel pending spec changes.

from babel-plugin-flow-react-proptypes.

I did try it without the decorator support, but I'll double check and see if I can get it to work in the way that you describe. Will let you know if I encounter anything.

from babel-plugin-flow-react-proptypes.

Ok, I tried it again for a container component and for a regular es6 class component. In both cases babel-plugin-flow-react-proptypes does not set the proptypes for me. In my other use cases it does work correctly. The container component for which it doesn't work:

/* @flow */

import { connect } from 'react-redux';
import React, { Component } from 'react';
import GapAnalysis from '../pages/GapAnalysis';
import { requestFacts, requestIndicators, requestVersions } from '../actions';

type Props = {
  facts: Object[],
  indicators: Object[],
  versions: Object[],
  requestFacts: Function,
  requestIndicators: Function,
  requestVersions: Function,
};

export class Unconnected extends Component {
  componentWillMount() {
    this.props.requestIndicators();
    this.props.requestVersions();
  }

  props: Props;

  render() {
    return <GapAnalysis {...this.props} />;
  }
}

const mapStateToProps = (state) => ({
  facts: state.facts.items,
  indicators: state.indicators.items,
  versions: state.versions.items,
});

const actions = { requestFacts, requestIndicators, requestVersions };

export default connect(mapStateToProps, actions)(Unconnected);

But maybe I'm doing something wrong here.

from babel-plugin-flow-react-proptypes.

That exact code works for me.

$ babel --presets es2015,react --plugins flow-react-proptypes a.js
// ...
Unconnected.propTypes = {
  facts: require('react').PropTypes.arrayOf(require('react').PropTypes.object).isRequired,
  indicators: require('react').PropTypes.arrayOf(require('react').PropTypes.object).isRequired,
  versions: require('react').PropTypes.arrayOf(require('react').PropTypes.object).isRequired,
  requestFacts: require('react').PropTypes.func.isRequired,
  requestIndicators: require('react').PropTypes.func.isRequired,
  requestVersions: require('react').PropTypes.func.isRequired
};
// ...

from babel-plugin-flow-react-proptypes.

Hmm strange, I must be doing something wrong then. I think this issue can be closed then, and should I find anything I'll let you know. Thanks for the feedback!

from babel-plugin-flow-react-proptypes.