Merge pull request #19666 from NicholasBoll/fix/react-redux-map-factories

[react-redux] Fix map factories

types/react-redux/index.d.ts

@@ -1,10 +1,11 @@
-// Type definitions for react-redux 5.0.5
+// Type definitions for react-redux 5.0.8
 // Project: https://github.com/rackt/react-redux
 // Definitions by: Qubo <https://github.com/tkqubo>,
 //                 Thomas Hasner <https://github.com/thasner>,
 //                 Kenzie Togami <https://github.com/kenzierocks>,
 //                 Curits Layne <https://github.com/clayne11>
 //                 Frank Tan <https://github.com/tansongyang>
+//                 Nicholas Boll <https://github.com/nicholasboll>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.4
 
@@ -141,7 +142,7 @@ interface MapStateToPropsFactory<TStateProps, TOwnProps> {
     (initialState: any, ownProps: TOwnProps): MapStateToProps<TStateProps, TOwnProps>;
 }
 
-type MapStateToPropsParam<TStateProps, TOwnProps> = MapStateToProps<TStateProps, TOwnProps> | MapStateToPropsFactory<TStateProps, TOwnProps>;
+type MapStateToPropsParam<TStateProps, TOwnProps> = MapStateToPropsFactory<TStateProps, TOwnProps> | MapStateToProps<TStateProps, TOwnProps> | null | undefined;
 
 interface MapDispatchToPropsFunction<TDispatchProps, TOwnProps> {
     (dispatch: Dispatch<any>, ownProps: TOwnProps): TDispatchProps;
@@ -154,7 +155,7 @@ interface MapDispatchToPropsFactory<TDispatchProps, TOwnProps> {
     (dispatch: Dispatch<any>, ownProps: TOwnProps): MapDispatchToProps<TDispatchProps, TOwnProps>;
 }
 
-type MapDispatchToPropsParam<TDispatchProps, TOwnProps> = MapDispatchToProps<TDispatchProps, TOwnProps> | MapDispatchToPropsFactory<TDispatchProps, TOwnProps>;
+type MapDispatchToPropsParam<TDispatchProps, TOwnProps> = MapDispatchToPropsFactory<TDispatchProps, TOwnProps> | MapDispatchToProps<TDispatchProps, TOwnProps>;
 
 interface MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps> {
     (stateProps: TStateProps, dispatchProps: TDispatchProps, ownProps: TOwnProps): TMergedProps;

types/react-redux/react-redux-tests.tsx

@@ -1,7 +1,7 @@
 import { Component, ReactElement } from 'react';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Store, Dispatch, ActionCreator, bindActionCreators } from 'redux';
+import { Store, Dispatch, ActionCreator, bindActionCreators, ActionCreatorsMapObject } from 'redux';
 import { connect, Provider, DispatchProp, MapStateToProps } from 'react-redux';
 import objectAssign = require('object-assign');
 
@@ -10,6 +10,265 @@ import objectAssign = require('object-assign');
 // https://github.com/rackt/react-redux/blob/master/docs/quick-start.md#quick-start
 //
 
+// Test cases written in a way to isolate types and variables and verify the
+// output of `connect` to make sure the signature is what is expected
+
+namespace Empty {
+    interface OwnProps { foo: string, dispatch: Dispatch<any> }    
+
+    class TestComponent extends Component<OwnProps> {}
+    
+    const Test = connect()(TestComponent)
+
+    const verify = <Test foo='bar' />
+}
+
+namespace MapState {
+    interface OwnProps { foo: string }
+    interface StateProps { bar: number }
+
+    class TestComponent extends Component<OwnProps & StateProps> {}
+
+    const mapStateToProps = (_: any) => ({
+        bar: 1
+    })
+
+    const Test = connect(
+        mapStateToProps
+    )(TestComponent)
+
+    const verify = <Test foo='bar' />
+}
+
+namespace MapStateWithDispatchProp {
+    interface OwnProps { foo: string }
+    interface StateProps { bar: number, dispatch: Dispatch<any> }
+
+    class TestComponent extends Component<OwnProps & StateProps> {}
+
+    const mapStateToProps = (_: any) => ({
+        bar: 1
+    })
+
+    const Test = connect(
+        mapStateToProps
+    )(TestComponent)
+
+    const verify = <Test foo='bar' />
+}
+
+namespace MapStateFactory {
+    interface OwnProps { foo: string }
+    interface StateProps { bar: number }
+
+    class TestComponent extends Component<OwnProps & StateProps> {}
+
+    const mapStateToProps = () => () => ({
+        bar: 1
+    })
+
+    const Test = connect(
+        mapStateToProps
+    )(TestComponent)
+
+    const verify = <Test foo='bar' />
+}
+
+namespace MapDispatch {
+    interface OwnProps { foo: string }
+    interface DispatchProps { onClick: () => void }
+
+    class TestComponent extends Component<OwnProps & DispatchProps> {}
+
+    const mapDispatchToProps = () => ({
+        onClick: () => {}
+    })
+
+    const TestNull = connect(
+        null,
+        mapDispatchToProps,
+    )(TestComponent)
+
+    const verifyNull = <TestNull foo='bar' />
+    
+    const TestUndefined = connect(
+        undefined,
+        mapDispatchToProps,
+    )(TestComponent)
+
+    const verifyUndefined = <TestUndefined foo='bar' />
+}
+
+namespace MapStateAndDispatchObject {
+    interface ClickPayload { count: number }
+    const onClick: ActionCreator<ClickPayload> = () => ({ count: 1 });
+    const dispatchToProps = {
+        onClick,
+    };
+
+    interface OwnProps { foo: string }
+    interface StateProps { bar: number }
+    interface DispatchProps { onClick: ActionCreator<ClickPayload> }
+
+    const mapStateToProps = (_: any, __: OwnProps): StateProps => ({
+        bar: 1
+    })
+
+    class TestComponent extends Component<OwnProps & StateProps & DispatchProps> {}
+
+    const Test = connect(
+        mapStateToProps,
+        dispatchToProps,
+    )(TestComponent)
+
+    const verify = <Test foo='bar' />
+}
+
+namespace MapDispatchFactory {
+    interface OwnProps { foo: string }
+    interface DispatchProps { onClick: () => void }
+
+    class TestComponent extends Component<OwnProps & DispatchProps> {}
+
+    const mapDispatchToPropsFactory = () => () => ({
+        onClick: () => {}
+    })
+
+    const TestNull = connect(
+        null,
+        mapDispatchToPropsFactory,
+    )(TestComponent)
+
+    const verifyNull = <TestNull foo='bar' />
+    
+    const TestUndefined = connect(
+        undefined,
+        mapDispatchToPropsFactory,
+    )(TestComponent)
+
+    const verifyUndefined = <TestUndefined foo='bar' />
+}
+
+namespace MapStateAndDispatch {
+    interface OwnProps { foo: string }
+    interface StateProps { bar: number }
+    interface DispatchProps { onClick: () => void }
+
+    class TestComponent extends Component<OwnProps & StateProps & DispatchProps> {}
+
+    const mapStateToProps = () => ({
+        bar: 1
+    })
+
+    const mapDispatchToProps = () => ({
+        onClick: () => {}
+    })
+
+    const Test = connect(
+        mapStateToProps,
+        mapDispatchToProps,
+    )(TestComponent)
+
+    const verify = <Test foo='bar' />
+}
+
+namespace MapStateFactoryAndDispatch {
+    interface OwnProps { foo: string }
+    interface StateProps { bar: number }
+    interface DispatchProps { onClick: () => void }
+    
+    const mapStateToPropsFactory = () => () =>({
+        bar: 1
+    })
+    
+    const mapDispatchToProps = () => ({
+        onClick: () => {}
+    })
+
+    class TestComponent extends Component<OwnProps & StateProps & DispatchProps> {}
+
+    const Test = connect(
+        mapStateToPropsFactory,
+        mapDispatchToProps,
+    )(TestComponent)
+
+    const verify = <Test foo='bar' />
+}
+
+namespace MapStateFactoryAndDispatchFactory {
+    interface OwnProps { foo: string }
+    interface StateProps { bar: number }
+    interface DispatchProps { onClick: () => void }
+    
+    const mapStateToPropsFactory = () => () =>({
+        bar: 1
+    })
+    
+    const mapDispatchToPropsFactory = () => () => ({
+        onClick: () => {}
+    })
+
+    class TestComponent extends Component<OwnProps & StateProps & DispatchProps> {}
+
+    const Test = connect(
+        mapStateToPropsFactory,
+        mapDispatchToPropsFactory,
+    )(TestComponent)
+
+    const verify = <Test foo='bar' />
+}
+
+namespace MapStateAndDispatchAndMerge {
+    interface OwnProps { foo: string }
+    interface StateProps { bar: number }
+    interface DispatchProps { onClick: () => void }
+
+    class TestComponent extends Component<OwnProps & StateProps & DispatchProps> {}
+
+    const mapStateToProps = () => ({
+        bar: 1
+    })
+
+    const mapDispatchToProps = () => ({
+        onClick: () => {}
+    })
+
+    const mergeProps = (stateProps: StateProps, dispatchProps: DispatchProps) => (
+        Object.assign({}, stateProps, dispatchProps)
+    )
+
+    const Test = connect(
+        mapStateToProps,
+        mapDispatchToProps,
+        mergeProps,
+    )(TestComponent)
+
+    const verify = <Test foo='bar' />
+}
+
+namespace MapStateAndOptions {
+    interface OwnProps { foo: string }
+    interface StateProps { bar: number }
+    interface DispatchProps { dispatch: Dispatch<any> }
+
+    class TestComponent extends Component<OwnProps & StateProps & DispatchProps> {}
+
+    const mapStateToProps = () => ({
+        bar: 1
+    })
+
+    const Test = connect(
+        mapStateToProps,
+        null,
+        null,
+        {
+            pure: true
+        }
+    )(TestComponent)
+
+    const verify = <Test foo='bar' />
+}
+
 interface CounterState {
     counter: number;
 }

types/react-redux/tsconfig.json

@@ -22,4 +22,4 @@
         "noEmit": true,
         "forceConsistentCasingInFileNames": true
     }
-}
+}