From c5521e38a9c25117c99ef433178b377f5dab9a3d Mon Sep 17 00:00:00 2001 From: Olegs Jeremejevs Date: Fri, 11 May 2018 16:07:14 +0300 Subject: [PATCH 1/3] react-redux: Fix Provider typing problem discussed in #25321, clean up a bit --- types/next-redux-wrapper/index.d.ts | 10 ++--- types/react-intl-redux/index.d.ts | 2 +- .../react-intl-redux-tests.tsx | 3 +- types/react-redux/index.d.ts | 45 ++++++++++--------- types/react-redux/react-redux-tests.tsx | 18 +++++++- 5 files changed, 49 insertions(+), 29 deletions(-) diff --git a/types/next-redux-wrapper/index.d.ts b/types/next-redux-wrapper/index.d.ts index cdbcb7b9e5..41e6739294 100644 --- a/types/next-redux-wrapper/index.d.ts +++ b/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( options: nextReduxWrapper.Options -): (Component: Component) => nextReduxWrapper.NextReduxWrappedComponent; +): (ComponentType: ComponentType) => nextReduxWrapper.NextReduxWrappedComponent; declare function nextReduxWrapper( createStore: nextReduxWrapper.NextStoreCreator, mapStateToProps?: MapStateToPropsParam, mapDispatchToProps?: MapDispatchToPropsParam, mergeProps?: MergeProps, options?: ConnectOptions -): (Component: Component) => nextReduxWrapper.NextReduxWrappedComponent; +): (ComponentType: ComponentType) => nextReduxWrapper.NextReduxWrappedComponent; declare namespace nextReduxWrapper { interface NextPageComponentMethods { getInitialProps(props: any): Promise; } - type NextReduxWrappedComponent

= Component

& NextPageComponentMethods; + type NextReduxWrappedComponent

= ComponentType

& NextPageComponentMethods; type NextStoreCreator = ( initialState: TInitialState, diff --git a/types/react-intl-redux/index.d.ts b/types/react-intl-redux/index.d.ts index daa5dd9926..f49f0d919f 100644 --- a/types/react-intl-redux/index.d.ts +++ b/types/react-intl-redux/index.d.ts @@ -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 extends ReduxProvider {} diff --git a/types/react-intl-redux/react-intl-redux-tests.tsx b/types/react-intl-redux/react-intl-redux-tests.tsx index 2c3e55fffa..6911523c05 100644 --- a/types/react-intl-redux/react-intl-redux-tests.tsx +++ b/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( - +

, document.getElementById("main") diff --git a/types/react-redux/index.d.ts b/types/react-redux/index.d.ts index a3e19267de..84dd5e6b6e 100644 --- a/types/react-redux/index.d.ts +++ b/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.2 +// Project: https://github.com/reactjs/react-redux // Definitions by: Qubo , // Thomas Hasner , // Kenzie Togami , @@ -26,27 +26,31 @@ // 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, + ReactNode, + StatelessComponent +} from 'react'; -type ComponentClass

= React.ComponentClass

; -type StatelessComponent

= React.StatelessComponent

; -type Component

= React.ComponentType

; -type ReactNode = React.ReactNode; -type Store = Redux.Store; -type Dispatch = Redux.Dispatch; -type ActionCreator = Redux.ActionCreator; +import { + Action, + ActionCreator, + AnyAction, + Dispatch, + Store +} from 'redux'; // Diff / Omit taken from https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-311923766 type Omit = Pick; - -export interface DispatchProp { - dispatch: Dispatch; +export interface DispatchProp { + dispatch: Dispatch; } interface AdvancedComponentDecorator { - (component: Component): ComponentClass; + (component: ComponentType): ComponentClass; } /** @@ -74,8 +78,8 @@ export interface InferableComponentEnhancerWithProps ): ComponentClass & {WrappedComponent: StatelessComponent}

>( - component: Component

- ): ComponentClass> & TNeedsProps> & {WrappedComponent: Component

} + component: ComponentType

+ ): ComponentClass> & TNeedsProps> & {WrappedComponent: ComponentType

} } // Injects props and removes them from the prop requirements. @@ -316,18 +320,17 @@ export interface ConnectOptions { withRef?: boolean } -export interface ProviderProps { +export interface ProviderProps { /** * The single Redux store in your application. */ - store?: Store; - children?: ReactNode; + store: Store; } /** * Makes the Redux store available to the connect() calls in the component hierarchy below. */ -export class Provider extends React.Component { } +export class Provider extends Component> { } /** * Creates a new which will set the Redux Store on the passed key of the context. You probably only need this diff --git a/types/react-redux/react-redux-tests.tsx b/types/react-redux/react-redux-tests.tsx index 16fb7f0306..eab234d5c4 100644 --- a/types/react-redux/react-redux-tests.tsx +++ b/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); } + +// 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 = () => ( + +

+ + ); +} From a0f9774a4df1b381dd9eb8ff735836322690b660 Mon Sep 17 00:00:00 2001 From: Olegs Jeremejevs Date: Fri, 11 May 2018 16:21:10 +0300 Subject: [PATCH 2/3] react-redux: Remove ReactNode import --- types/react-intl-redux/react-intl-redux-tests.tsx | 2 +- types/react-redux/index.d.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/types/react-intl-redux/react-intl-redux-tests.tsx b/types/react-intl-redux/react-intl-redux-tests.tsx index 6911523c05..5e74b515cc 100644 --- a/types/react-intl-redux/react-intl-redux-tests.tsx +++ b/types/react-intl-redux/react-intl-redux-tests.tsx @@ -1,7 +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' +import { createStore } from "redux" var action: IntlAction = updateIntl({ locale : "en", messages : {} }) var state: IntlState = intlReducer({ locale : "en", messages : {} }, action) diff --git a/types/react-redux/index.d.ts b/types/react-redux/index.d.ts index 84dd5e6b6e..b3718f5b74 100644 --- a/types/react-redux/index.d.ts +++ b/types/react-redux/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-redux 6.0.2 +// Type definitions for react-redux 6.0.3 // Project: https://github.com/reactjs/react-redux // Definitions by: Qubo , // Thomas Hasner , @@ -30,7 +30,6 @@ import { Component, ComponentClass, ComponentType, - ReactNode, StatelessComponent } from 'react'; From c79c53115b994a348b640cb0618b51207297fca7 Mon Sep 17 00:00:00 2001 From: Olegs Jeremejevs Date: Sat, 23 Jun 2018 18:52:18 +0300 Subject: [PATCH 3/3] react-redux: Add defaults to new type parameters --- types/react-intl-redux/index.d.ts | 4 ++-- types/react-redux/index.d.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/types/react-intl-redux/index.d.ts b/types/react-intl-redux/index.d.ts index f49f0d919f..9d9e805df9 100644 --- a/types/react-intl-redux/index.d.ts +++ b/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 extends ReduxProvider {} diff --git a/types/react-redux/index.d.ts b/types/react-redux/index.d.ts index b3718f5b74..7447c1efa3 100644 --- a/types/react-redux/index.d.ts +++ b/types/react-redux/index.d.ts @@ -1,5 +1,5 @@ // Type definitions for react-redux 6.0.3 -// Project: https://github.com/reactjs/react-redux +// Project: https://github.com/reduxjs/react-redux // Definitions by: Qubo , // Thomas Hasner , // Kenzie Togami , @@ -319,7 +319,7 @@ export interface ConnectOptions { withRef?: boolean } -export interface ProviderProps { +export interface ProviderProps { /** * The single Redux store in your application. */ @@ -329,7 +329,7 @@ export interface ProviderProps { /** * Makes the Redux store available to the connect() calls in the component hierarchy below. */ -export class Provider extends Component> { } +export class Provider extends Component> { } /** * Creates a new which will set the Redux Store on the passed key of the context. You probably only need this