Merge pull request #26360 from jeremejevs/react-redux

react-redux: Fix Provider typing problem discussed in #25321

types/next-redux-wrapper/index.d.ts

@@ -13,32 +13,32 @@
  *~ workarounds for this limitation of ES6 modules.
  */
 
-import * as React from 'react';
 import { IncomingMessage, ServerResponse } from 'http';
+import { ComponentType } from 'react';
 import {
-    Store, Component,
     MapDispatchToPropsParam, MapStateToPropsParam,
     MergeProps, Options as ConnectOptions
 } from 'react-redux';
+import { Store } from 'redux';
 
 export = nextReduxWrapper;
 
 declare function nextReduxWrapper<TInitialState = any, TStateProps = any, TDispatchProps = any, TOwnProps = any, TMergedProps = any>(
     options: nextReduxWrapper.Options<TInitialState, TStateProps, TDispatchProps, TOwnProps, TMergedProps>
-): (Component: Component<TOwnProps & TMergedProps>) => nextReduxWrapper.NextReduxWrappedComponent<TOwnProps>;
+): (ComponentType: ComponentType<TOwnProps & TMergedProps>) => nextReduxWrapper.NextReduxWrappedComponent<TOwnProps>;
 declare function nextReduxWrapper<TInitialState = any, TStateProps = any, TDispatchProps = any, TOwnProps = any, TMergedProps = any>(
     createStore: nextReduxWrapper.NextStoreCreator<TInitialState, TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
     mapStateToProps?: MapStateToPropsParam<TStateProps, TOwnProps, any>,
     mapDispatchToProps?: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
     mergeProps?: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
     options?: ConnectOptions
-): (Component: Component<TOwnProps & TMergedProps>) => nextReduxWrapper.NextReduxWrappedComponent<TOwnProps>;
+): (ComponentType: ComponentType<TOwnProps & TMergedProps>) => nextReduxWrapper.NextReduxWrappedComponent<TOwnProps>;
 
 declare namespace nextReduxWrapper {
     interface NextPageComponentMethods {
         getInitialProps(props: any): Promise<any>;
     }
-    type NextReduxWrappedComponent<P> = Component<P> & NextPageComponentMethods;
+    type NextReduxWrappedComponent<P> = ComponentType<P> & NextPageComponentMethods;
 
     type NextStoreCreator<TInitialState, TStateProps, TDispatchProps, TOwnProps, TMergedProps> = (
         initialState: TInitialState,

types/react-intl-redux/index.d.ts

@@ -4,7 +4,7 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
-import { Action } from "redux"
+import { Action, AnyAction } from "redux"
 import { Provider as ReduxProvider } from "react-redux"
 import { IntlProvider as ReactIntlProvider } from "react-intl"
 
@@ -20,4 +20,4 @@ interface IntlAction extends Action {
 export function intlReducer(state: IntlState, action: IntlAction): IntlState
 export function updateIntl (opts: IntlState): IntlAction
 export class IntlProvider extends ReactIntlProvider {}
-export class Provider extends ReduxProvider {}
+export class Provider<A extends Action = AnyAction> extends ReduxProvider<A> {}

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

@@ -1,6 +1,7 @@
 import * as React from "react"
 import { render } from "react-dom"
 import { Provider, IntlProvider, IntlState, IntlAction, intlReducer, updateIntl } from "react-intl-redux"
+import { createStore } from "redux"
 
 var action: IntlAction = updateIntl({ locale : "en", messages : {} })
 var state: IntlState = intlReducer({ locale : "en", messages : {} }, action)
@@ -13,7 +14,7 @@ render(
 )
 
 render(
-    <Provider>
+    <Provider store={createStore(intlReducer)}>
         <div>Test</div>
     </Provider>,
     document.getElementById("main")

types/react-redux/index.d.ts

@@ -1,5 +1,5 @@
-// Type definitions for react-redux 6.0.1
-// Project: https://github.com/rackt/react-redux
+// Type definitions for react-redux 6.0.3
+// Project: https://github.com/reduxjs/react-redux
 // Definitions by: Qubo <https://github.com/tkqubo>,
 //                 Thomas Hasner <https://github.com/thasner>,
 //                 Kenzie Togami <https://github.com/kenzierocks>,
@@ -26,27 +26,30 @@
 // to update this type definitions for redux@4.x from redux@3.x.
 // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/25321
 
-import * as React from 'react';
-import * as Redux from 'redux';
+import {
+    Component,
+    ComponentClass,
+    ComponentType,
+    StatelessComponent
+} from 'react';
 
-type ComponentClass<P> = React.ComponentClass<P>;
-type StatelessComponent<P> = React.StatelessComponent<P>;
-type Component<P> = React.ComponentType<P>;
-type ReactNode = React.ReactNode;
-type Store<S> = Redux.Store<S>;
-type Dispatch<A extends Redux.Action = Redux.AnyAction> = Redux.Dispatch<A>;
-type ActionCreator<A> = Redux.ActionCreator<A>;
+import {
+    Action,
+    ActionCreator,
+    AnyAction,
+    Dispatch,
+    Store
+} from 'redux';
 
 // Diff / Omit taken from https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-311923766
 type Omit<T, K extends keyof T> = Pick<T, ({ [P in keyof T]: P } & { [P in K]: never } & { [x: string]: never, [x: number]: never })[keyof T]>;
 
-
-export interface DispatchProp<A extends Redux.Action = Redux.AnyAction> {
-  dispatch: Dispatch<A>;
+export interface DispatchProp<A extends Action = AnyAction> {
+    dispatch: Dispatch<A>;
 }
 
 interface AdvancedComponentDecorator<TProps, TOwnProps> {
-    (component: Component<TProps>): ComponentClass<TOwnProps>;
+    (component: ComponentType<TProps>): ComponentClass<TOwnProps>;
 }
 
 /**
@@ -74,8 +77,8 @@ export interface InferableComponentEnhancerWithProps<TInjectedProps, TNeedsProps
 		component: StatelessComponent<TInjectedProps>
 	): ComponentClass<TNeedsProps> & {WrappedComponent: StatelessComponent<TInjectedProps>}
 	<P extends Shared<TInjectedProps, P>>(
-		component: Component<P>
-	): ComponentClass<Omit<P, keyof Shared<TInjectedProps, P>> & TNeedsProps> & {WrappedComponent: Component<P>}
+		component: ComponentType<P>
+	): ComponentClass<Omit<P, keyof Shared<TInjectedProps, P>> & TNeedsProps> & {WrappedComponent: ComponentType<P>}
 }
 
 // Injects props and removes them from the prop requirements.
@@ -316,18 +319,17 @@ export interface ConnectOptions {
     withRef?: boolean
 }
 
-export interface ProviderProps {
+export interface ProviderProps<A extends Action = AnyAction> {
     /**
      * The single Redux store in your application.
      */
-    store?: Store<any>;
-    children?: ReactNode;
+    store: Store<any, A>;
 }
 
 /**
  * Makes the Redux store available to the connect() calls in the component hierarchy below.
  */
-export class Provider extends React.Component<ProviderProps, {}> { }
+export class Provider<A extends Action = AnyAction> extends Component<ProviderProps<A>> { }
 
 /**
  * Creates a new <Provider> which will set the Redux Store on the passed key of the context. You probably only need this

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, AnyAction, ActionCreator, createStore, bindActionCreators, ActionCreatorsMapObject } from 'redux';
+import { Store, Dispatch, AnyAction, ActionCreator, createStore, bindActionCreators, ActionCreatorsMapObject, Reducer } from 'redux';
 import { Connect, connect, createProvider, Provider, DispatchProp, MapStateToProps, Options } from 'react-redux';
 import objectAssign = require('object-assign');
 
@@ -985,3 +985,19 @@ namespace TestWithoutTOwnPropsDecoratedInference {
     const ConnectedWithPickedOwnProps = connect(mapStateToPropsForPicked)(AllPropsComponent);
     <ConnectedWithPickedOwnProps own="blah" />
 }
+
+// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/25321#issuecomment-387659500
+namespace ProviderAcceptsStoreWithCustomAction {
+    const reducer: Reducer<
+        { foo: number } | undefined,
+        { type: "foo"; payload: number }
+    > = state => state;
+
+    const store = createStore(reducer);
+
+    const Whatever = () => (
+        <Provider store={store}>
+            <div>Whatever</div>
+        </Provider>
+    );
+}