[react-redux] Expose dispatch with props (#16652)

This commit is contained in:
Blake Embrey
2017-06-02 10:19:38 -04:00
committed by Andy
parent 323f17be38
commit 2bc7feeb48
2 changed files with 31 additions and 27 deletions

View File

@@ -15,17 +15,16 @@ type Store<S> = Redux.Store<S>;
type Dispatch<S> = Redux.Dispatch<S>;
type ActionCreator<A> = Redux.ActionCreator<A>;
interface ComponentDecorator<TOwnProps, TMergedProps> {
(component: Component<TMergedProps>): ComponentClass<TOwnProps>;
export interface DispatchProp<T> {
dispatch: Dispatch<T>
}
/**
* Decorator that infers the type from the original component
*
* Can't use the above decorator because it would default the type to {}
*/
export interface InferableComponentDecorator<TOwnProps> {
<T extends Component<TOwnProps>>(component: T): T;
interface ComponentDecorator<TMergedProps> {
<TOwnProps>(component: Component<(TOwnProps & TMergedProps) | TOwnProps>): ComponentClass<TOwnProps>;
}
interface ComponentMergeDecorator<TMergedProps, TOwnProps> {
(component: Component<TMergedProps>): ComponentClass<TOwnProps>;
}
/**
@@ -47,73 +46,73 @@ export interface InferableComponentDecorator<TOwnProps> {
* @param mergeProps
* @param options
*/
export declare function connect<TOwnProps>(): InferableComponentDecorator<TOwnProps>;
export declare function connect(): ComponentDecorator<DispatchProp<any>>;
export declare function connect<TStateProps, no_dispatch, TOwnProps>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps>
): ComponentDecorator<TOwnProps, TStateProps & TOwnProps>;
): ComponentDecorator<DispatchProp<any> & TStateProps>;
export declare function connect<no_state, TDispatchProps, TOwnProps>(
mapStateToProps: null | undefined,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
): ComponentDecorator<TOwnProps, TDispatchProps & TOwnProps>;
): ComponentDecorator<TDispatchProps & TOwnProps>;
export declare function connect<TStateProps, TDispatchProps, TOwnProps>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps>,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>
): ComponentDecorator<TOwnProps, TStateProps & TDispatchProps & TOwnProps>;
): ComponentDecorator<TStateProps & TDispatchProps>;
export declare function connect<TStateProps, no_dispatch, TOwnProps, TMergedProps>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps>,
mapDispatchToProps: null | undefined,
mergeProps: MergeProps<TStateProps, undefined, TOwnProps, TMergedProps>,
): ComponentDecorator<TOwnProps, TMergedProps>;
): ComponentMergeDecorator<TMergedProps, TOwnProps>;
export declare function connect<no_state, TDispatchProps, TOwnProps, TMergedProps>(
mapStateToProps: null | undefined,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
mergeProps: MergeProps<undefined, TDispatchProps, TOwnProps, TMergedProps>,
): ComponentDecorator<TOwnProps, TMergedProps>;
): ComponentMergeDecorator<TMergedProps, TOwnProps>;
export declare function connect<no_state, no_dispatch, TOwnProps, TMergedProps>(
mapStateToProps: null | undefined,
mapDispatchToProps: null | undefined,
mergeProps: MergeProps<undefined, undefined, TOwnProps, TMergedProps>,
): ComponentDecorator<TOwnProps, TMergedProps>;
): ComponentMergeDecorator<TMergedProps, TOwnProps>;
export declare function connect<TStateProps, TDispatchProps, TOwnProps, TMergedProps>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps>,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
mergeProps: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
): ComponentDecorator<TOwnProps, TMergedProps>;
): ComponentMergeDecorator<TMergedProps, TOwnProps>;
export declare function connect<TStateProps, no_dispatch, TOwnProps>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps>,
mapDispatchToProps: null | undefined,
mergeProps: null | undefined,
options: Options
): ComponentDecorator<TOwnProps, TStateProps & TOwnProps>;
): ComponentDecorator<DispatchProp<any> & TStateProps & TOwnProps>;
export declare function connect<no_state, TDispatchProps, TOwnProps>(
mapStateToProps: null | undefined,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
mergeProps: null | undefined,
options: Options
): ComponentDecorator<TOwnProps, TDispatchProps & TOwnProps>;
): ComponentDecorator<TDispatchProps>;
export declare function connect<TStateProps, TDispatchProps, TOwnProps>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps>,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
mergeProps: null | undefined,
options: Options
): ComponentDecorator<TOwnProps, TStateProps & TDispatchProps & TOwnProps>;
): ComponentDecorator<TStateProps & TDispatchProps>;
export declare function connect<TStateProps, TDispatchProps, TOwnProps, TMergedProps>(
mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps>,
mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
mergeProps: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>,
options: Options
): ComponentDecorator<TOwnProps, TMergedProps>;
): ComponentMergeDecorator<TMergedProps, TOwnProps>;
interface MapStateToProps<TStateProps, TOwnProps> {
(state: any, ownProps?: TOwnProps): TStateProps;

View File

@@ -2,7 +2,7 @@ import { Component, ReactElement } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Store, Dispatch, bindActionCreators } from 'redux';
import { connect, Provider } from 'react-redux';
import { connect, Provider, DispatchProp } from 'react-redux';
import objectAssign = require('object-assign');
//
@@ -108,8 +108,11 @@ declare var store: Store<TodoState>;
class MyRootComponent extends Component<any, any> {
}
class TodoApp extends Component<any, any> {
class TodoApp extends Component<DispatchProp<any>, any> {
render (): null {
this.props.dispatch({ type: 'test' })
return null
}
}
interface TodoState {
todos: string[]|string;
@@ -153,7 +156,9 @@ ReactDOM.render(
// Inject just dispatch and don't listen to store
connect()(TodoApp);
const WrappedTodoApp = connect()<{}>(TodoApp);
<WrappedTodoApp />
// Inject dispatch and every field in the global state
@@ -261,7 +266,7 @@ function mergeProps(stateProps: TodoState, dispatchProps: DispatchProps, ownProp
});
}
connect(mapStateToProps2, actionCreators, mergeProps)(TodoApp);
connect(mapStateToProps2, actionCreators, mergeProps)(MyRootComponent);
//https://github.com/DefinitelyTyped/DefinitelyTyped/issues/14622#issuecomment-279820358
@@ -280,7 +285,7 @@ class TestComponent extends Component<TestProp, TestState> { }
const WrappedTestComponent = connect()(TestComponent);
// return value of the connect()(TestComponent) is of the type TestComponent
let ATestComponent: typeof TestComponent = null;
let ATestComponent: React.ComponentClass<TestProp> = null;
ATestComponent = TestComponent;
ATestComponent = WrappedTestComponent;