diff --git a/types/react-redux/index.d.ts b/types/react-redux/index.d.ts index 4d3ae2f5c5..203ce7f791 100644 --- a/types/react-redux/index.d.ts +++ b/types/react-redux/index.d.ts @@ -6,6 +6,7 @@ // Curits Layne // Frank Tan // Nicholas Boll +// Dibyo Majumdar // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.4 @@ -66,73 +67,80 @@ export type InferableComponentEnhancer = * @param mergeProps * @param options */ -export declare function connect(): InferableComponentEnhancer>; +export interface Connect { + (): InferableComponentEnhancer>; -export declare function connect( - mapStateToProps: MapStateToPropsParam -): InferableComponentEnhancerWithProps, TOwnProps>; + ( + mapStateToProps: MapStateToPropsParam + ): InferableComponentEnhancerWithProps, TOwnProps>; -export declare function connect( - mapStateToProps: null | undefined, - mapDispatchToProps: MapDispatchToPropsParam -): InferableComponentEnhancerWithProps; + ( + mapStateToProps: null | undefined, + mapDispatchToProps: MapDispatchToPropsParam + ): InferableComponentEnhancerWithProps; -export declare function connect( - mapStateToProps: MapStateToPropsParam, - mapDispatchToProps: MapDispatchToPropsParam -): InferableComponentEnhancerWithProps; + ( + mapStateToProps: MapStateToPropsParam, + mapDispatchToProps: MapDispatchToPropsParam + ): InferableComponentEnhancerWithProps; -export declare function connect( - mapStateToProps: MapStateToPropsParam, - mapDispatchToProps: null | undefined, - mergeProps: MergeProps, -): InferableComponentEnhancerWithProps; + ( + mapStateToProps: MapStateToPropsParam, + mapDispatchToProps: null | undefined, + mergeProps: MergeProps, + ): InferableComponentEnhancerWithProps; -export declare function connect( - mapStateToProps: null | undefined, - mapDispatchToProps: MapDispatchToPropsParam, - mergeProps: MergeProps, -): InferableComponentEnhancerWithProps; + ( + mapStateToProps: null | undefined, + mapDispatchToProps: MapDispatchToPropsParam, + mergeProps: MergeProps, + ): InferableComponentEnhancerWithProps; -export declare function connect( - mapStateToProps: null | undefined, - mapDispatchToProps: null | undefined, - mergeProps: MergeProps, -): InferableComponentEnhancerWithProps; + ( + mapStateToProps: null | undefined, + mapDispatchToProps: null | undefined, + mergeProps: MergeProps, + ): InferableComponentEnhancerWithProps; -export declare function connect( - mapStateToProps: MapStateToPropsParam, - mapDispatchToProps: MapDispatchToPropsParam, - mergeProps: MergeProps, -): InferableComponentEnhancerWithProps; + ( + mapStateToProps: MapStateToPropsParam, + mapDispatchToProps: MapDispatchToPropsParam, + mergeProps: MergeProps, + ): InferableComponentEnhancerWithProps; -export declare function connect( - mapStateToProps: MapStateToPropsParam, - mapDispatchToProps: null | undefined, - mergeProps: null | undefined, - options: Options -): InferableComponentEnhancerWithProps & TStateProps, TOwnProps>; + ( + mapStateToProps: MapStateToPropsParam, + mapDispatchToProps: null | undefined, + mergeProps: null | undefined, + options: Options + ): InferableComponentEnhancerWithProps & TStateProps, TOwnProps>; -export declare function connect( - mapStateToProps: null | undefined, - mapDispatchToProps: MapDispatchToPropsParam, - mergeProps: null | undefined, - options: Options -): InferableComponentEnhancerWithProps; + ( + mapStateToProps: null | undefined, + mapDispatchToProps: MapDispatchToPropsParam, + mergeProps: null | undefined, + options: Options + ): InferableComponentEnhancerWithProps; -export declare function connect( - mapStateToProps: MapStateToPropsParam, - mapDispatchToProps: MapDispatchToPropsParam, - mergeProps: null | undefined, - options: Options -): InferableComponentEnhancerWithProps; + ( + mapStateToProps: MapStateToPropsParam, + mapDispatchToProps: MapDispatchToPropsParam, + mergeProps: null | undefined, + options: Options + ): InferableComponentEnhancerWithProps; -export declare function connect( - mapStateToProps: MapStateToPropsParam, - mapDispatchToProps: MapDispatchToPropsParam, - mergeProps: MergeProps, - options: Options -): InferableComponentEnhancerWithProps; + ( + mapStateToProps: MapStateToPropsParam, + mapDispatchToProps: MapDispatchToPropsParam, + mergeProps: MergeProps, + options: Options + ): InferableComponentEnhancerWithProps; +} + +/** + * The connect function. See {@type Connect} for details. + */ +export declare const connect: Connect; interface MapStateToProps { (state: any, ownProps: TOwnProps): TStateProps; @@ -284,3 +292,12 @@ export interface ProviderProps { * Makes the Redux store available to the connect() calls in the component hierarchy below. */ export class Provider extends React.Component { } + +/** + * Creates a new which will set the Redux Store on the passed key of the context. You probably only need this + * if you are in the inadvisable position of having multiple stores. You will also need to pass the same storeKey to the + * options argument of connect. + * + * @param storeKey The key of the context on which to set the store. + */ +export declare function createProvider(storeKey: string): typeof Provider; diff --git a/types/react-redux/react-redux-tests.tsx b/types/react-redux/react-redux-tests.tsx index c52d40d0aa..1b10f6d645 100644 --- a/types/react-redux/react-redux-tests.tsx +++ b/types/react-redux/react-redux-tests.tsx @@ -1,8 +1,8 @@ import { Component, ReactElement } from 'react'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { Store, Dispatch, ActionCreator, bindActionCreators, ActionCreatorsMapObject } from 'redux'; -import { connect, Provider, DispatchProp, MapStateToProps } from 'react-redux'; +import { Store, Dispatch, ActionCreator, createStore, bindActionCreators, ActionCreatorsMapObject } from 'redux'; +import { Connect, connect, createProvider, Provider, DispatchProp, MapStateToProps, Options } from 'react-redux'; import objectAssign = require('object-assign'); // @@ -14,10 +14,10 @@ import objectAssign = require('object-assign'); // output of `connect` to make sure the signature is what is expected namespace Empty { - interface OwnProps { foo: string, dispatch: Dispatch } + interface OwnProps { foo: string, dispatch: Dispatch } class TestComponent extends Component {} - + const Test = connect()(TestComponent) const verify = @@ -90,7 +90,7 @@ namespace MapDispatch { )(TestComponent) const verifyNull = - + const TestUndefined = connect( undefined, mapDispatchToProps, @@ -140,7 +140,7 @@ namespace MapDispatchFactory { )(TestComponent) const verifyNull = - + const TestUndefined = connect( undefined, mapDispatchToPropsFactory, @@ -176,11 +176,11 @@ namespace MapStateFactoryAndDispatch { interface OwnProps { foo: string } interface StateProps { bar: number } interface DispatchProps { onClick: () => void } - + const mapStateToPropsFactory = () => () =>({ bar: 1 }) - + const mapDispatchToProps = () => ({ onClick: () => {} }) @@ -199,11 +199,11 @@ namespace MapStateFactoryAndDispatchFactory { interface OwnProps { foo: string } interface StateProps { bar: number } interface DispatchProps { onClick: () => void } - + const mapStateToPropsFactory = () => () =>({ bar: 1 }) - + const mapDispatchToPropsFactory = () => () => ({ onClick: () => {} }) @@ -850,3 +850,47 @@ namespace TestWrappedComponent { // `Connected` does not require explicit `name` prop const TestConnected = (props: any) => ; } + +namespace TestCreateProvider { + const STORE_KEY = 'myStore'; + + const MyStoreProvider = createProvider(STORE_KEY); + + const myStoreConnect: Connect = function( + mapStateToProps?: any, + mapDispatchToProps?: any, + mergeProps?: any, + options: Options = {}, + ) { + options.storeKey = STORE_KEY; + return connect( + mapStateToProps, + mapDispatchToProps, + mergeProps, + options, + ); + }; + + interface State { a: number }; + const store = createStore(() => ({ a: 1 })); + const myStore = createStore(() => ({ a: 2 })); + + interface AProps { a: number }; + const A = (props: AProps) => (

A is {props.a}

); + const A1 = connect(state => state)(A); + const A2 = myStoreConnect(state => state)(A); + + const Combined = () => ( + + + + + + + ); + + // This renders: + //

A is 1

+ //

A is 2

+ ReactDOM.render(, document.body); +}