[react-redux-5.x.x][flow_v0.89.x-] Unexpected behaviour

This code:

// @flow

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

// import type { Location } from 'react-router-dom';

type Action1 = {| type: string |};
type Dispatch1 = Action1 => Action1;

const action1 = (): Action1 => ({ type: 'str' });

type DispatchProps = {| action1: () => Action1 |};
type MapDispatchToPropsFn = Dispatch1 => DispatchProps;

const mapDispatchToProps: MapDispatchToPropsFn = (dispatch: Dispatch1) => ({
  action1: (...args) => dispatch(action1(...args)),
});

type OwnProps = {|
  location: Location,
|};

type Props = { ...OwnProps, ...DispatchProps };

const Com = (props: Props) => props.toString();

export default connect<Props, OwnProps, _, DispatchProps, _, Dispatch1>(
  null,
  mapDispatchToProps,
)(Com);

Passes flow checks, but if uncomment the line // import type { Location } from 'react-router-dom';:

     src/Test.jsx
     26│ const Com = (props: Props) => props.toString();
     27│
     28│ export default connect<Props, OwnProps, _, DispatchProps, _, Dispatch1>(
 [1] 29│   null,
     30│   mapDispatchToProps,
     31│ )(Com);
     32│

     flow-typed/npm/react-redux_v5.x.x.js
 [2] 50│     | ((state: S, ownProps: OP) => SP)
       :
 [3] 56│     | ((state: S, ownProps: OP) => (state: S, ownProps: OP) => SP);

Any imported from react-router-dom type (ContextRouter, Match, Location, etc.) and used in OwnParams causes the error.

[rkurbatov]

@paravozz no-no! I re-exported it in the project. Like:

// modules/types/site.js

import { ContextRouter } from 'react-router'

export type FixMeContextRouter = ContextRouter

and then

import { FixMeContextRouter } from 'types/site'

That was the only unresolved problem in our project. Now I have 4000 lines of code PR doing literally nothing than new flow 😃

[AndrewSouthpaw]

This is how we’ve done it in our own codebase, I’m manually tricking Flow in the MSTP.

type OwnPropsT = {||}

type PropsT = {|
  ...OwnPropsT,
  navigation: NavigationT<*>,
|}

export class _Foo extends React.Component<PropsT> { /* ... */ }

const mapStateToProps = (state: GlobalStateT, ownProps: OwnPropsT) => ({
  navigation: (ownProps: any).navigation, // trick Flow to handle other injected props
})

export const Foo = withNavigation(connect<PropsT, OwnPropsT, _, _, _, _>(mapStateToProps)(_Foo))

Doing it this way keeps the correct typing defined in PropsT.