How to easily type Redux Props with Flow

flow-redux.guideline.md

How to easily type Redux Props with Flow

Add ExtractReturn helper

// https://hackernoon.com/redux-flow-type-getting-the-maximum-benefit-from-the-fewest-key-strokes-5c006c54ec87
// https://github.com/facebook/flow/issues/4002
// eslint-disable-next-line no-unused-vars
type _ExtractReturn<B, F: (...args: any[]) => B> = B;
export type ExtractReturn<F> = _ExtractReturn<*, F>;

Extract return of mapStateToProps and mapDispatchToProps

const mapStateToProps = state => ({
  user: state.user,
});
const mapDispatchToProps = dispatch => ({
  actions: {
    logout: () => dispatch(logout()),
  },
});

type ReduxProps = ExtractReturn<typeof mapStateToProps>;
type ReduxActions = ExtractReturn<typeof mapDispatchToProps>;

Add ReduxProps and ReduxActions to your Component props

type Props = {} & ReduxProps & ReduxState

class EntriaComp extends Component<Props> {}

Just pasting in @calebmer's version of the ExtractReturn:

ExtractReturn is even better with $Call:
$Call<((...Iterable) => T) => T, Fn>

I want to go back to that later and have both versions in one place.