flowtype-broken-with-react-redux.js

import {connect} from 'react-redux';
// redux and react-redux are great! Let's create a connected component that looks up firstName in the state
// note that the age prop still needs to be supplied to ConnectedWhatsMyAgeAgain
const ConnectedWhatsMyAgeAgain = connect(
  (state:{user:{name:string}}) => ({
    firstName: state.user.name.split(' ')[0],
  })
)(WhatsMyAgeAgain);

function App() {
  return (
    <div>
      <ConnectedWhatsMyAgeAgain/> {/* :( flow does not complain that this is missing the age prop :( */}
    </div>
  )
}

flowtype-forget-about-it.js

import {compose, withState, withProps} from 'recompose';
import {connect} from 'react-redux';
import {subscribe} from '../redux/subscriptions'

function renderWhen(predicate:(props:Object)=>boolean) {
  return function hoc<Config>(ComposedComponent: ReactClass<Config>) {
    return function(props:Object) {
      if (predicate(props)) {
        return <ComposedComponent {...props}/>;
      }
      return null;
    }
  }
}

function PackingListUI({
  addItemToList,
  changeExpand,
  changeStep,
  expanded,
  step,
  totalWeight,
  tripKey,
  trip,
  list,
  addedBy,
  profile,
  myUid,
  style
}:{
  addItemToList:Function,
  changeExpand:Function,
  changeStep:Function,
  expanded:boolean,
  step:number,
  totalWeight:number,
  tripKey:TripKey,
  trip:Trip,
  list:?List,
  addedBy:string,
  profile:Profile,
  myUid:string,
  style:any,
}) {
  // ...
}

const PackingList = compose(
  withState('expanded', 'changeExpand', false),
  withState('step', 'changeStep', 0),
  subscribe({
    trip: tripFromId('tripKey'),
    profile: profileFromId('addedBy'),
  }),
  renderWhen(({trip, profile}) => trip && profile),
  withProps(({trip}) => ({listKey: trip && trip.listKey})),
  subscribe({list: listFromId('listKey')}),
  connect(
    (state, {listKey, list}) => ({
      totalWeight: listKey && list && getListWeight(state, listKey),
      myUid: selectors.getLoggedInUserOrThrow(state).uid,
    }),
    {
      addItemToList: actions.addItemToList,
    }
  ),
)(PackingListUI);

flowtype-working-with-functional-components.js

// Here is an example that works. I love it.
// This is great! (except the lack of type declarations inside object destructuring syntax.)
type Props = {
  firstName: string,
  age: number,
}
function WhatsMyAgeAgain({firstName, age}:Props) {
  return <div>Hi {firstName}, you are {age} years old!</div>;
}

function App() {
  return (
    <div>
      <WhatsMyAgeAgain/> {/* flow rightfully complains that this is missing a firstName and age prop! */}
    </div>
  )
}